<!DOCTYPE html>
<!-- Template Name: Rapido - Responsive Admin Template build with Twitter Bootstrap 3.x Version: 1.0 Author: ClipTheme -->
<!--[if IE 8]><html class="ie8" lang="zh-CN"><![endif]-->
<!--[if IE 9]><html class="ie9" lang="zh-CN"><![endif]-->
<!--[if !IE]><!-->
<html lang="zh-CN">
	<!--<![endif]-->
	<!-- start: HEAD -->
	<head>
		<title>Rapido - Responsive Admin Template</title>
		<!-- start: META -->
		<meta charset="utf-8" />
		<!--[if IE]><meta http-equiv='X-UA-Compatible' content="IE=edge,IE=9,IE=8,chrome=1" /><![endif]-->
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta content="" name="description" />
		<meta content="" name="author" />
		<!-- end: META -->
		<!-- start: MAIN CSS -->
		<!-- <link href='http://fonts.useso.com/css?family=Raleway:400,300,500,600,700,200,100,800' rel='stylesheet' type='text/css'> -->
		<link rel="stylesheet" href="assets/plugins/bootstrap/css/bootstrap.min.css">
		<link rel="stylesheet" href="assets/plugins/font-awesome/css/font-awesome.min.css">
		<link rel="stylesheet" href="assets/plugins/iCheck/skins/all.css">
		<link rel="stylesheet" href="assets/plugins/perfect-scrollbar/src/perfect-scrollbar.css">
		<link rel="stylesheet" href="assets/plugins/animate.css/animate.min.css">
		<!-- end: MAIN CSS -->
		<!-- start: CSS REQUIRED FOR SUBVIEW CONTENTS -->
		<link rel="stylesheet" href="assets/plugins/owl-carousel/owl-carousel/owl.carousel.css">
		<link rel="stylesheet" href="assets/plugins/owl-carousel/owl-carousel/owl.theme.css">
		<link rel="stylesheet" href="assets/plugins/owl-carousel/owl-carousel/owl.transitions.css">
		<link rel="stylesheet" href="assets/plugins/summernote/dist/summernote.css">
		<link rel="stylesheet" href="assets/plugins/fullcalendar/fullcalendar/fullcalendar.css">
		<link rel="stylesheet" href="assets/plugins/toastr/toastr.min.css">
		<link rel="stylesheet" href="assets/plugins/bootstrap-select/bootstrap-select.min.css">
		<link rel="stylesheet" href="assets/plugins/bootstrap-switch/dist/css/bootstrap3/bootstrap-switch.min.css">
		<link rel="stylesheet" href="assets/plugins/DataTables/media/css/DT_bootstrap.css">
		<link rel="stylesheet" href="assets/plugins/bootstrap-fileupload/bootstrap-fileupload.min.css">
		<link rel="stylesheet" href="assets/plugins/bootstrap-daterangepicker/daterangepicker-bs3.css">
		<!-- end: CSS REQUIRED FOR THIS SUBVIEW CONTENTS-->
		<!-- start: CSS REQUIRED FOR THIS PAGE ONLY -->
		<link rel="stylesheet" href="assets/plugins/bootstrap-social-buttons/bootstrap-social.css">
		<link rel="stylesheet" href="assets/plugins/ladda-bootstrap/dist/ladda.min.css">
		<link rel="stylesheet" href="assets/plugins/ladda-bootstrap/dist/ladda-themeless.min.css">
		<!-- end: CSS REQUIRED FOR THIS PAGE ONLY -->
		<!-- start: CORE CSS -->
		<link rel="stylesheet" href="assets/css/styles.css">
		<link rel="stylesheet" href="assets/css/styles-responsive.css">
		<link rel="stylesheet" href="assets/css/plugins.css">
		<link rel="stylesheet" href="assets/css/themes/theme-default.css" type="text/css" id="skin_color">
		<link rel="stylesheet" href="assets/css/print.css" type="text/css" media="print"/>
		<!-- end: CORE CSS -->
		<link rel="shortcut icon" href="favicon.ico" />
	</head>
	<!-- end: HEAD -->
	<!-- start: BODY -->
	<body>
		<!-- start: SLIDING BAR (SB) -->
		<div id="slidingbar-area">
			<div id="slidingbar">
				<div class="row">
					<!-- start: SLIDING BAR FIRST COLUMN -->
					<div class="col-md-4 col-sm-4">
						<h2>My Options</h2>
						<div class="row">
							<div class="col-xs-6 col-lg-3">
								<button class="btn btn-icon btn-block space10">
									<i class="fa fa-folder-open-o"></i>
									Projects <span class="badge badge-info partition-red"> 4 </span>
								</button>
							</div>
							<div class="col-xs-6 col-lg-3">
								<button class="btn btn-icon btn-block space10">
									<i class="fa fa-envelope-o"></i>
									Messages <span class="badge badge-info partition-red"> 23 </span>
								</button>
							</div>
							<div class="col-xs-6 col-lg-3">
								<button class="btn btn-icon btn-block space10">
									<i class="fa fa-calendar-o"></i>
									Calendar <span class="badge badge-info partition-blue"> 5 </span>
								</button>
							</div>
							<div class="col-xs-6 col-lg-3">
								<button class="btn btn-icon btn-block space10">
									<i class="fa fa-bell-o"></i>
									Notifications <span class="badge badge-info partition-red"> 9 </span>
								</button>
							</div>
						</div>
					</div>
					<!-- end: SLIDING BAR FIRST COLUMN -->
					<!-- start: SLIDING BAR SECOND COLUMN -->
					<div class="col-md-4 col-sm-4">
						<h2>My Recent Works</h2>
						<div class="blog-photo-stream margin-bottom-30">
							<ul class="list-unstyled">
								<li>
									<a href="#"><img alt="" src="assets/images/image01_th.jpg"></a>
								</li>
								<li>
									<a href="#"><img alt="" src="assets/images/image02_th.jpg"></a>
								</li>
								<li>
									<a href="#"><img alt="" src="assets/images/image03_th.jpg"></a>
								</li>
								<li>
									<a href="#"><img alt="" src="assets/images/image04_th.jpg"></a>
								</li>
								<li>
									<a href="#"><img alt="" src="assets/images/image05_th.jpg"></a>
								</li>
								<li>
									<a href="#"><img alt="" src="assets/images/image06_th.jpg"></a>
								</li>
								<li>
									<a href="#"><img alt="" src="assets/images/image07_th.jpg"></a>
								</li>
								<li>
									<a href="#"><img alt="" src="assets/images/image08_th.jpg"></a>
								</li>
								<li>
									<a href="#"><img alt="" src="assets/images/image09_th.jpg"></a>
								</li>
								<li>
									<a href="#"><img alt="" src="assets/images/image10_th.jpg"></a>
								</li>
							</ul>
						</div>
					</div>
					<!-- end: SLIDING BAR SECOND COLUMN -->
					<!-- start: SLIDING BAR THIRD COLUMN -->
					<div class="col-md-4 col-sm-4">
						<h2>My Info</h2>
						<address class="margin-bottom-40">
							Peter Clark
							<br>
							12345 Street Name, City Name, United States
							<br>
							P: (641)-734-4763
							<br>
							Email:
							<a href="#">
								peter.clark@example.com
							</a>
						</address>
						<a class="btn btn-transparent-white" href="#">
							<i class="fa fa-pencil"></i> Edit
						</a>
					</div>
					<!-- end: SLIDING BAR THIRD COLUMN -->
				</div>
				<div class="row">
					<!-- start: SLIDING BAR TOGGLE BUTTON -->
					<div class="col-md-12 text-center">
						<a href="#" class="sb_toggle"><i class="fa fa-chevron-up"></i></a>
					</div>
					<!-- end: SLIDING BAR TOGGLE BUTTON -->
				</div>
			</div>
		</div>
		<!-- end: SLIDING BAR -->
		<div class="main-wrapper">
			<!-- start: TOPBAR -->
			<header class="topbar navbar navbar-inverse navbar-fixed-top inner">
				<!-- start: TOPBAR CONTAINER -->
				<div class="container">
					<div class="navbar-header">
						<a class="sb-toggle-left hidden-md hidden-lg" href="#main-navbar">
							<i class="fa fa-bars"></i>
						</a>
						<!-- start: LOGO -->
						<a class="navbar-brand" href="index.html">
							<img src="assets/images/logo.png" alt="Rapido"/>
						</a>
						<!-- end: LOGO -->
					</div>
					<div class="topbar-tools">
						<!-- start: TOP NAVIGATION MENU -->
						<ul class="nav navbar-right">
							<!-- start: USER DROPDOWN -->
							<li class="dropdown current-user">
								<a data-toggle="dropdown" data-hover="dropdown" class="dropdown-toggle" data-close-others="true" href="#">
									<img src="assets/images/avatar-1-small.jpg" class="img-circle" alt=""> <span class="username hidden-xs">Peter Clark</span> <i class="fa fa-caret-down "></i>
								</a>
								<ul class="dropdown-menu dropdown-dark">
									<li>
										<a href="pages_user_profile.html">
											My Profile
										</a>
									</li>
									<li>
										<a href="pages_calendar.html">
											My Calendar
										</a>
									</li>
									<li>
										<a href="pages_messages.html">
											My Messages (3)
										</a>
									</li>
									<li>
										<a href="login_lock_screen.html">
											Lock Screen
										</a>
									</li>
									<li>
										<a href="login_login.html">
											Log Out
										</a>
									</li>
								</ul>
							</li>
							<!-- end: USER DROPDOWN -->
							<li class="right-menu-toggle">
								<a href="#" class="sb-toggle-right">
									<i class="fa fa-globe toggle-icon"></i> <i class="fa fa-caret-right"></i> <span class="notifications-count badge badge-default hide"> 3</span>
								</a>
							</li>
						</ul>
						<!-- end: TOP NAVIGATION MENU -->
					</div>
				</div>
				<!-- end: TOPBAR CONTAINER -->
			</header>
			<!-- end: TOPBAR -->
			<!-- start: PAGESLIDE LEFT -->
			<a class="closedbar inner hidden-sm hidden-xs" href="#">
			</a>
			<nav id="pageslide-left" class="pageslide inner">
				<div class="navbar-content">
					<!-- start: SIDEBAR -->
					<div class="main-navigation left-wrapper transition-left">
						<div class="navigation-toggler hidden-sm hidden-xs">
							<a href="#main-navbar" class="sb-toggle-left">
							</a>
						</div>
						<div class="user-profile border-top padding-horizontal-10 block">
							<div class="inline-block">
								<img src="assets/images/avatar-1.jpg" alt="">
							</div>
							<div class="inline-block">
								<h5 class="no-margin"> Welcome </h5>
								<h4 class="no-margin"> Peter Clark </h4>
								<a class="btn user-options sb_toggle">
									<i class="fa fa-cog"></i>
								</a>
							</div>
						</div>
						<!-- start: MAIN NAVIGATION MENU -->
						<ul class="main-navigation-menu">
							<li>
								<a href="index.html"><i class="fa fa-home"></i> <span class="title"> Dashboard </span><span class="label label-default pull-right ">LABEL</span> </a>
							</li>
							<li>
								<a href="javascript:void(0)"><i class="fa fa-desktop"></i> <span class="title"> Layouts </span><i class="icon-arrow"></i> </a>
								<ul class="sub-menu">
									<li>
										<a href="javascript:;">
											Horizontal Menu <i class="icon-arrow"></i>
										</a>
										<ul class="sub-menu">
											<li>
												<a href="layouts_horizontal_menu.html">
													Horizontal Menu
												</a>
											</li>
											<li>
												<a href="layouts_horizontal_menu_fixed.html">
													Horizontal Menu Fixed
												</a>
											</li>
											<li>
												<a href="layouts_horizontal_sidebar_menu.html">
													Horizontal &amp; Sidebar Menu
												</a>
											</li>
										</ul>
									</li>
									<li>
										<a href="layouts_sidebar_closed.html">
											<span class="title"> Sidebar Closed </span>
										</a>
									</li>
									<li>
										<a href="layouts_sidebar_not_fixed.html">
											<span class="title"> Sidebar Not Fixed </span>
										</a>
									</li>								
									<li>
										<a href="layouts_boxed_layout.html">
											<span class="title"> Boxed Layout </span>
										</a>
									</li>
									<li>
										<a href="layouts_footer_fixed.html">
											<span class="title"> Footer Fixed </span>
										</a>
									</li>									
									<li>
										<a href="layouts_single_page.html">
											<span class="title"> Single-Page Interface </span>
										</a>
									</li>									
								</ul>
							</li>
							<li class="active open">
								<a href="javascript:void(0)"><i class="fa fa-cogs"></i> <span class="title"> UI Lab </span><i class="icon-arrow"></i> </a>
								<ul class="sub-menu">
									<li>
										<a href="ui_elements.html">
											<span class="title"> Elements </span>
										</a>
									</li>
									<li class="active">
										<a href="ui_buttons.html">
											<span class="title"> Buttons </span>
										</a>
									</li>
									<li>
										<a href="ui_icons.html">
											<span class="title"> Icons </span>
										</a>
									</li>
									<li>
										<a href="ui_animations.html">
											<span class="title"> CSS3 Animation </span>
										</a>
									</li>
									<li>
										<a href="ui_subview.html">
											<span class="title"> Subview </span> <span class="label partition-blue pull-right ">HOT</span>
										</a>
									</li>
									<li>
										<a href="ui_modals.html">
											<span class="title"> Extended Modals </span>
										</a>
									</li>
									<li>
										<a href="ui_tabs_accordions.html">
											<span class="title"> Tabs &amp; Accordions </span>
										</a>
									</li>
									<li>
										<a href="ui_panels.html">
											<span class="title"> Panels </span>
										</a>
									</li>
									<li>
										<a href="ui_notifications.html">
											<span class="title"> Notifications </span>
										</a>
									</li>
									<li>
										<a href="ui_sliders.html">
											<span class="title"> Sliders </span>
										</a>
									</li>
									<li>
										<a href="ui_treeview.html">
											<span class="title"> Treeview </span>
										</a>
									</li>
									<li>
										<a href="ui_nestable.html">
											<span class="title"> Nestable List </span>
										</a>
									</li>
									<li>
										<a href="ui_typography.html">
											<span class="title"> Typography </span>
										</a>
									</li>
								</ul>
							</li>
							<li>
								<a href="javascript:void(0)"><i class="fa fa-th-large"></i> <span class="title"> Tables </span><i class="icon-arrow"></i> </a>
								<ul class="sub-menu">
									<li>
										<a href="table_basic.html">
											<span class="title">Basic Tables</span>
										</a>
									</li>
									<li>
										<a href="table_responsive.html">
											<span class="title">Responsive Tables</span>
										</a>
									</li>
									<li>
										<a href="table_data.html">
											<span class="title">Advanced Data Tables</span>
										</a>
									</li>
									<li>
										<a href="table_export.html">
											<span class="title">Table Export</span>
										</a>
									</li>
								</ul>
							</li>
							<li>
								<a href="javascript:void(0)"><i class="fa fa-pencil-square-o"></i> <span class="title"> Forms </span><i class="icon-arrow"></i> </a>
								<ul class="sub-menu">
									<li>
										<a href="form_elements.html">
											<span class="title">Form Elements</span>
										</a>
									</li>
									<li>
										<a href="form_wizard.html">
											<span class="title">Form Wizard</span>
										</a>
									</li>
									<li>
										<a href="form_validation.html">
											<span class="title">Form Validation</span>
										</a>
									</li>
									<li>
										<a href="form_inline.html">
											<span class="title">Inline Editor</span>
										</a>
									</li>
									<li>
										<a href="form_x_editable.html">
											<span class="title">Form X-editable</span>
										</a>
									</li>
									<li>
										<a href="form_image_cropping.html">
											<span class="title">Image Cropping</span>
										</a>
									</li>
									<li>
										<a href="form_multiple_upload.html">
											<span class="title">Multiple File Upload</span>
										</a>
									</li>
									<li>
										<a href="form_dropzone.html">
											<span class="title">Dropzone File Upload</span>
										</a>
									</li>
								</ul>
							</li>
							<li>
								<a href="javascript:void(0)"><i class="fa fa-user"></i> <span class="title">Login</span><i class="icon-arrow"></i> </a>
								<ul class="sub-menu">
									<li>
										<a href="login_login.html">
											<span class="title"> Login Form </span>
										</a>
									</li>
									<li>
										<a href="login_login.html?box=register">
											<span class="title"> Registration Form </span>
										</a>
									</li>
									<li>
										<a href="login_login.html?box=forgot">
											<span class="title"> Forgot Password Form </span>
										</a>
									</li>
									<li>
										<a href="login_lock_screen.html">
											<span class="title">Lock Screen</span>
										</a>
									</li>
								</ul>
							</li>
							<li>
								<a href="javascript:void(0)"><i class="fa fa-code"></i> <span class="title">Pages</span><i class="icon-arrow"></i> </a>
								<ul class="sub-menu">
									<li>
										<a href="pages_user_profile.html">
											<span class="title">User Profile</span>
										</a>
									</li>
									<li>
										<a href="pages_invoice.html">
											<span class="title">Invoice</span>
										</a>
									</li>
									<li>
										<a href="pages_gallery.html">
											<span class="title">Gallery</span>
										</a>
									</li>
									<li>
										<a href="pages_timeline.html">
											<span class="title">Timeline</span>
										</a>
									</li>
									<li>
										<a href="pages_calendar.html">
											<span class="title">Calendar</span>
										</a>
									</li>
									<li>
										<a href="pages_messages.html">
											<span class="title">Messages</span>
										</a>
									</li>
									<li>
										<a href="pages_blank_page.html">
											<span class="title">Blank Page</span>
										</a>
									</li>
								</ul>
							</li>
							<li>
								<a href="javascript:void(0)"><i class="fa fa-cubes"></i> <span class="title">Utility</span><i class="icon-arrow"></i> </a>
								<ul class="sub-menu">
									<li>
										<a href="utility_faq.html">
											<span class="title">Faq</span>
										</a>
									</li>
									<li>
										<a href="utility_search_result.html">
											<span class="title">Search Results </span>
										</a>
									</li>
									<li>
										<a href="utility_404_example1.html">
											<span class="title">Error 404 Example 1</span>
										</a>
									</li>
									<li>
										<a href="utility_404_example2.html">
											<span class="title">Error 404 Example 2</span>
										</a>
									</li>
									<li>
										<a href="utility_404_example3.html">
											<span class="title">Error 404 Example 3</span>
										</a>
									</li>
									<li>
										<a href="utility_500_example1.html">
											<span class="title">Error 500 Example 1</span>
										</a>
									</li>
									<li>
										<a href="utility_500_example2.html">
											<span class="title">Error 500 Example 2</span>
										</a>
									</li>
									<li>
										<a href="utility_pricing_table.html">
											<span class="title">Pricing Table</span>
										</a>
									</li>
									<li>
										<a href="utility_coming_soon.html">
											<span class="title">Cooming Soon</span>
										</a>
									</li>
								</ul>
							</li>
							<li>
								<a href="javascript:;" class="active">
									<i class="fa fa-folder"></i> <span class="title"> 3 Level Menu </span> <i class="icon-arrow"></i>
								</a>
								<ul class="sub-menu">
									<li>
										<a href="javascript:;">
											Item 1 <i class="icon-arrow"></i>
										</a>
										<ul class="sub-menu">
											<li>
												<a href="#">
													Sample Link 1
												</a>
											</li>
											<li>
												<a href="#">
													Sample Link 2
												</a>
											</li>
											<li>
												<a href="#">
													Sample Link 3
												</a>
											</li>
										</ul>
									</li>
									<li>
										<a href="javascript:;">
											Item 1 <i class="icon-arrow"></i>
										</a>
										<ul class="sub-menu">
											<li>
												<a href="#">
													Sample Link 1
												</a>
											</li>
											<li>
												<a href="#">
													Sample Link 1
												</a>
											</li>
											<li>
												<a href="#">
													Sample Link 1
												</a>
											</li>
										</ul>
									</li>
									<li>
										<a href="#">
											Item 3
										</a>
									</li>
								</ul>
							</li>
							<li>
								<a href="javascript:;">
									<i class="fa fa-folder-open"></i> <span class="title"> 4 Level Menu </span><i class="icon-arrow"></i> <span class="arrow "></span>
								</a>
								<ul class="sub-menu">
									<li>
										<a href="javascript:;">
											Item 1 <i class="icon-arrow"></i>
										</a>
										<ul class="sub-menu">
											<li>
												<a href="javascript:;">
													Sample Link 1 <i class="icon-arrow"></i>
												</a>
												<ul class="sub-menu">
													<li>
														<a href="#"><i class="fa fa-times"></i> Sample Link 1</a>
													</li>
													<li>
														<a href="#"><i class="fa fa-pencil"></i> Sample Link 1</a>
													</li>
													<li>
														<a href="#"><i class="fa fa-edit"></i> Sample Link 1</a>
													</li>
												</ul>
											</li>
											<li>
												<a href="#">
													Sample Link 1
												</a>
											</li>
											<li>
												<a href="#">
													Sample Link 2
												</a>
											</li>
											<li>
												<a href="#">
													Sample Link 3
												</a>
											</li>
										</ul>
									</li>
									<li>
										<a href="javascript:;">
											Item 2 <i class="icon-arrow"></i>
										</a>
										<ul class="sub-menu">
											<li>
												<a href="#">
													Sample Link 1
												</a>
											</li>
											<li>
												<a href="#">
													Sample Link 1
												</a>
											</li>
											<li>
												<a href="#">
													Sample Link 1
												</a>
											</li>
										</ul>
									</li>
									<li>
										<a href="#">
											Item 3
										</a>
									</li>
								</ul>
							</li>
							<li>
								<a href="maps.html"><i class="fa fa-map-marker"></i> <span class="title">Maps</span> </a>
							</li>
							<li>
								<a href="charts.html"><i class="fa fa-bar-chart-o"></i> <span class="title">Charts</span> </a>
							</li>
						</ul>
						<!-- end: MAIN NAVIGATION MENU -->
					</div>
					<!-- end: SIDEBAR -->
				</div>
				<div class="slide-tools">
					<div class="col-xs-6 text-left no-padding">
						<a class="btn btn-sm status" href="#">
							Status <i class="fa fa-dot-circle-o text-green"></i> <span>Online</span>
						</a>
					</div>
					<div class="col-xs-6 text-right no-padding">
						<a class="btn btn-sm log-out text-right" href="login_login.html">
							<i class="fa fa-power-off"></i> Log Out
						</a>
					</div>
				</div>
			</nav>
			<!-- end: PAGESLIDE LEFT -->
			<!-- start: PAGESLIDE RIGHT -->
			<div id="pageslide-right" class="pageslide slide-fixed inner">
				<div class="right-wrapper">
					<div class="notifications">
						<div class="pageslide-title">
							You have 11 notifications
						</div>
						<ul class="pageslide-list">
							<li>
								<a href="javascript:void(0)">
									<span class="label label-primary"><i class="fa fa-user"></i></span> <span class="message"> New user registration</span> <span class="time"> 1 min</span>
								</a>
							</li>
							<li>
								<a href="javascript:void(0)">
									<span class="label label-success"><i class="fa fa-comment"></i></span> <span class="message"> New comment</span> <span class="time"> 7 min</span>
								</a>
							</li>
							<li>
								<a href="javascript:void(0)">
									<span class="label label-success"><i class="fa fa-comment"></i></span> <span class="message"> New comment</span> <span class="time"> 8 min</span>
								</a>
							</li>
							<li>
								<a href="javascript:void(0)">
									<span class="label label-success"><i class="fa fa-comment"></i></span> <span class="message"> New comment</span> <span class="time"> 16 min</span>
								</a>
							</li>
							<li>
								<a href="javascript:void(0)">
									<span class="label label-primary"><i class="fa fa-user"></i></span> <span class="message"> New user registration</span> <span class="time"> 36 min</span>
								</a>
							</li>
							<li>
								<a href="javascript:void(0)">
									<span class="label label-warning"><i class="fa fa-shopping-cart"></i></span> <span class="message"> 2 items sold</span> <span class="time"> 1 hour</span>
								</a>
							</li>
							<li class="warning">
								<a href="javascript:void(0)">
									<span class="label label-danger"><i class="fa fa-user"></i></span> <span class="message"> User deleted account</span> <span class="time"> 2 hour</span>
								</a>
							</li>
						</ul>
						<div class="view-all">
							<a href="javascript:void(0)">
								See all notifications <i class="fa fa-arrow-circle-o-right"></i>
							</a>
						</div>
					</div>
					<div class="hidden-xs" id="style_selector">
						<div id="style_selector_container">
							<div class="pageslide-title">
								Style Selector
							</div>
							<div class="box-title">
								Choose Your Layout Style
							</div>
							<div class="input-box">
								<div class="input">
									<select name="layout" class="form-control">
										<option value="default">Wide</option><option value="boxed">Boxed</option>
									</select>
								</div>
							</div>
							<div class="box-title">
								Choose Your Header Style
							</div>
							<div class="input-box">
								<div class="input">
									<select name="header" class="form-control">
										<option value="fixed">Fixed</option><option value="default">Default</option>
									</select>
								</div>
							</div>
							<div class="box-title">
								Choose Your Sidebar Style
							</div>
							<div class="input-box">
								<div class="input">
									<select name="sidebar" class="form-control">
										<option value="fixed">Fixed</option><option value="default">Default</option>
									</select>
								</div>
							</div>
							<div class="box-title">
								Choose Your Footer Style
							</div>
							<div class="input-box">
								<div class="input">
									<select name="footer" class="form-control">
										<option value="default">Default</option><option value="fixed">Fixed</option>
									</select>
								</div>
							</div>
							<div class="box-title">
								10 Predefined Color Schemes
							</div>
							<div class="images icons-color">
								<a href="#" id="default"><img src="assets/images/color-1.png" alt="" class="active"></a>
								<a href="#" id="style2"><img src="assets/images/color-2.png" alt=""></a>
								<a href="#" id="style3"><img src="assets/images/color-3.png" alt=""></a>
								<a href="#" id="style4"><img src="assets/images/color-4.png" alt=""></a>
								<a href="#" id="style5"><img src="assets/images/color-5.png" alt=""></a>
								<a href="#" id="style6"><img src="assets/images/color-6.png" alt=""></a>
								<a href="#" id="style7"><img src="assets/images/color-7.png" alt=""></a>
								<a href="#" id="style8"><img src="assets/images/color-8.png" alt=""></a>
								<a href="#" id="style9"><img src="assets/images/color-9.png" alt=""></a>
								<a href="#" id="style10"><img src="assets/images/color-10.png" alt=""></a>
							</div>
							<div class="box-title">
								Backgrounds for Boxed Version
							</div>
							<div class="images boxed-patterns">
								<a href="#" id="bg_style_1"><img src="assets/images/bg.png" alt=""></a>
								<a href="#" id="bg_style_2"><img src="assets/images/bg_2.png" alt=""></a>
								<a href="#" id="bg_style_3"><img src="assets/images/bg_3.png" alt=""></a>
								<a href="#" id="bg_style_4"><img src="assets/images/bg_4.png" alt=""></a>
								<a href="#" id="bg_style_5"><img src="assets/images/bg_5.png" alt=""></a>
							</div>
							<div class="style-options">
								<a href="#" class="clear_style">
									Clear Styles
								</a>
								<a href="#" class="save_style">
									Save Styles
								</a>
							</div>
						</div>
						<div class="style-toggle open"></div>
					</div>
				</div>
			</div>
			<!-- end: PAGESLIDE RIGHT -->
			<!-- start: MAIN CONTAINER -->
			<div class="main-container inner">
				<!-- start: PAGE -->
				<div class="main-content">
					<!-- start: PANEL CONFIGURATION MODAL FORM -->
					<div class="modal fade" id="panel-config" tabindex="-1" role="dialog" aria-hidden="true">
						<div class="modal-dialog">
							<div class="modal-content">
								<div class="modal-header">
									<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
										&times;
									</button>
									<h4 class="modal-title">Panel Configuration</h4>
								</div>
								<div class="modal-body">
									Here will be a configuration form
								</div>
								<div class="modal-footer">
									<button type="button" class="btn btn-default" data-dismiss="modal">
										Close
									</button>
									<button type="button" class="btn btn-primary">
										Save changes
									</button>
								</div>
							</div>
							<!-- /.modal-content -->
						</div>
						<!-- /.modal-dialog -->
					</div>
					<!-- /.modal -->
					<!-- end: SPANEL CONFIGURATION MODAL FORM -->
					<div class="container">
						<!-- start: PAGE HEADER -->
						<!-- start: TOOLBAR -->
						<div class="toolbar row">
							<div class="col-sm-6 hidden-xs">
								<div class="page-header">
									<h1>Buttons <small>buttons, icons, dropdowns and more</small></h1>
								</div>
							</div>
							<div class="col-sm-6 col-xs-12">
								<a href="#" class="back-subviews">
									<i class="fa fa-chevron-left"></i> BACK
								</a>
								<a href="#" class="close-subviews">
									<i class="fa fa-times"></i> CLOSE
								</a>
								<div class="toolbar-tools pull-right">
									<!-- start: TOP NAVIGATION MENU -->
									<ul class="nav navbar-right">
										<!-- start: TO-DO DROPDOWN -->
										<li class="dropdown">
											<a data-toggle="dropdown" data-hover="dropdown" class="dropdown-toggle" data-close-others="true" href="#">
												<i class="fa fa-plus"></i> SUBVIEW
												<div class="tooltip-notification hide">
													<div class="tooltip-notification-arrow"></div>
													<div class="tooltip-notification-inner">
														<div>
															<div class="semi-bold">
																HI THERE!
															</div>
															<div class="message">
																Try the Subview Live Experience
															</div>
														</div>
													</div>
												</div>
											</a>
											<ul class="dropdown-menu dropdown-light dropdown-subview">
												<li class="dropdown-header">
													Notes
												</li>
												<li>
													<a href="#newNote" class="new-note"><span class="fa-stack"> <i class="fa fa-file-text-o fa-stack-1x fa-lg"></i> <i class="fa fa-plus fa-stack-1x stack-right-bottom text-danger"></i> </span> Add new note</a>
												</li>
												<li>
													<a href="#readNote" class="read-all-notes"><span class="fa-stack"> <i class="fa fa-file-text-o fa-stack-1x fa-lg"></i> <i class="fa fa-share fa-stack-1x stack-right-bottom text-danger"></i> </span> Read all notes</a>
												</li>
												<li class="dropdown-header">
													Calendar
												</li>
												<li>
													<a href="#newEvent" class="new-event"><span class="fa-stack"> <i class="fa fa-calendar-o fa-stack-1x fa-lg"></i> <i class="fa fa-plus fa-stack-1x stack-right-bottom text-danger"></i> </span> Add new event</a>
												</li>
												<li>
													<a href="#showCalendar" class="show-calendar"><span class="fa-stack"> <i class="fa fa-calendar-o fa-stack-1x fa-lg"></i> <i class="fa fa-share fa-stack-1x stack-right-bottom text-danger"></i> </span> Show calendar</a>
												</li>
												<li class="dropdown-header">
													Contributors
												</li>
												<li>
													<a href="#newContributor" class="new-contributor"><span class="fa-stack"> <i class="fa fa-user fa-stack-1x fa-lg"></i> <i class="fa fa-plus fa-stack-1x stack-right-bottom text-danger"></i> </span> Add new contributor</a>
												</li>
												<li>
													<a href="#showContributors" class="show-contributors"><span class="fa-stack"> <i class="fa fa-user fa-stack-1x fa-lg"></i> <i class="fa fa-share fa-stack-1x stack-right-bottom text-danger"></i> </span> Show all contributor</a>
												</li>
											</ul>
										</li>
										<li class="dropdown">
											<a data-toggle="dropdown" data-hover="dropdown" class="dropdown-toggle" data-close-others="true" href="#">
												<span class="messages-count badge badge-default hide">3</span> <i class="fa fa-envelope"></i> MESSAGES
											</a>
											<ul class="dropdown-menu dropdown-light dropdown-messages">
												<li>
													<span class="dropdown-header"> You have 9 messages</span>
												</li>
												<li>
													<div class="drop-down-wrapper ps-container">
														<ul>
															<li class="unread">
																<a href="javascript:;" class="unread">
																	<div class="clearfix">
																		<div class="thread-image">
																			<img src="./assets/images/avatar-2.jpg" alt="">
																		</div>
																		<div class="thread-content">
																			<span class="author">Nicole Bell</span>
																			<span class="preview">Duis mollis, est non commodo luctus, nisi erat porttitor ligula...</span>
																			<span class="time"> Just Now</span>
																		</div>
																	</div>
																</a>
															</li>
															<li>
																<a href="javascript:;" class="unread">
																	<div class="clearfix">
																		<div class="thread-image">
																			<img src="./assets/images/avatar-3.jpg" alt="">
																		</div>
																		<div class="thread-content">
																			<span class="author">Steven Thompson</span>
																			<span class="preview">Duis mollis, est non commodo luctus, nisi erat porttitor ligula...</span>
																			<span class="time">8 hrs</span>
																		</div>
																	</div>
																</a>
															</li>
															<li>
																<a href="javascript:;">
																	<div class="clearfix">
																		<div class="thread-image">
																			<img src="./assets/images/avatar-5.jpg" alt="">
																		</div>
																		<div class="thread-content">
																			<span class="author">Kenneth Ross</span>
																			<span class="preview">Duis mollis, est non commodo luctus, nisi erat porttitor ligula...</span>
																			<span class="time">14 hrs</span>
																		</div>
																	</div>
																</a>
															</li>
														</ul>
													</div>
												</li>
												<li class="view-all">
													<a href="pages_messages.html">
														See All
													</a>
												</li>
											</ul>
										</li>
										<li class="menu-search">
											<a href="#">
												<i class="fa fa-search"></i> SEARCH
											</a>
											<!-- start: SEARCH POPOVER -->
											<div class="popover bottom search-box transition-all">
												<div class="arrow"></div>
												<div class="popover-content">
													<!-- start: SEARCH FORM -->
													<form class="" id="searchform" action="#">
														<div class="input-group">
															<input type="text" class="form-control" placeholder="Search">
															<span class="input-group-btn">
																<button class="btn btn-main-color btn-squared" type="button">
																	<i class="fa fa-search"></i>
																</button> </span>
														</div>
													</form>
													<!-- end: SEARCH FORM -->
												</div>
											</div>
											<!-- end: SEARCH POPOVER -->
										</li>
									</ul>
									<!-- end: TOP NAVIGATION MENU -->
								</div>
							</div>
						</div>
						<!-- end: TOOLBAR -->
						<!-- end: PAGE HEADER -->
						<!-- start: BREADCRUMB -->
						<div class="row">
							<div class="col-md-12">
								<ol class="breadcrumb">
									<li>
										<a href="#">
											Dashboard
										</a>
									</li>
									<li class="active">
										Buttons
									</li>
								</ol>
							</div>
						</div>
						<!-- end: BREADCRUMB -->
						<!-- start: PAGE CONTENT -->
						<div class="row">
							<div class="col-sm-6">
								<!-- start: BUTTONS PANEL -->
								<div class="panel panel-white">
									<div class="panel-heading">
										<h4 class="panel-title">Buttons</h4>
										<div class="panel-tools">										
											<div class="dropdown">
											<a data-toggle="dropdown" class="btn btn-xs dropdown-toggle btn-transparent-grey">
												<i class="fa fa-cog"></i>
											</a>
											<ul class="dropdown-menu dropdown-light pull-right" role="menu">
												<li>
													<a class="panel-collapse collapses" href="#"><i class="fa fa-angle-up"></i> <span>Collapse</span> </a>
												</li>
												<li>
													<a class="panel-refresh" href="#"> <i class="fa fa-refresh"></i> <span>Refresh</span> </a>
												</li>
												<li>
													<a class="panel-config" href="#panel-config" data-toggle="modal"> <i class="fa fa-wrench"></i> <span>Configurations</span></a>
												</li>
												<li>
													<a class="panel-expand" href="#"> <i class="fa fa-expand"></i> <span>Fullscreen</span></a>
												</li>										
											</ul>
											</div>
											<a class="btn btn-xs btn-link panel-close" href="#"> <i class="fa fa-times"></i> </a>
										</div>
									</div>
									<div class="panel-body buttons-widget">
										<p>
											Use any of the available button classes to quickly create a styled button.
										</p>
										<h5>Default <span class="text-bold">Buttons</span></h5>
										<p class="space20">
											<!-- Standard grey button with gradient -->
											<button type="button" class="btn btn-default">
												Default
											</button>
											<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
											<button type="button" class="btn btn-primary">
												Primary
											</button>
											<!-- Indicates a successful or positive action -->
											<button type="button" class="btn btn-success">
												Success
											</button>
											<!-- Contextual button for informational alert messages -->
											<button type="button" class="btn btn-info">
												Info
											</button>
											<!-- Indicates caution should be taken with this action -->
											<button type="button" class="btn btn-warning">
												Warning
											</button>
											<!-- Indicates a dangerous or potentially negative action -->
											<button type="button" class="btn btn-danger">
												Danger
											</button>
											<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
											<button type="button" class="btn btn-link">
												Link
											</button>
										</p>
										<h5>Colorful <span class="text-bold">Buttons</span></h5>
										<p class="space20">
											<button type="button" class="btn btn-azure">
												Azure
											</button>
											<button type="button" class="btn btn-light-azure">
												Light Azure
											</button>
											<button type="button" class="btn btn-dark-azure">
												Dark Azure
											</button>
											<button type="button" class="btn btn-beige">
												Beige
											</button>
											<button type="button" class="btn btn-light-beige">
												Light Beige
											</button>
											<button type="button" class="btn btn-dark-beige">
												Dark Beige
											</button>
											<button type="button" class="btn btn-orange">
												Orange
											</button>
											<button type="button" class="btn btn-light-orange">
												Light Orange
											</button>
											<button type="button" class="btn btn-dark-orange">
												Dark Orange
											</button>
											<button type="button" class="btn btn-red">
												Red
											</button>
											<button type="button" class="btn btn-light-red">
												Light Red
											</button>
											<button type="button" class="btn btn-dark-red">
												Dark Red
											</button>
											<button type="button" class="btn btn-green">
												Green
											</button>
											<button type="button" class="btn btn-light-green">
												Light Green
											</button>
											<button type="button" class="btn btn-dark-green">
												Dark Green
											</button>
											<button type="button" class="btn btn-blue">
												Blue
											</button>
											<button type="button" class="btn btn-light-blue">
												Light Blue
											</button>
											<button type="button" class="btn btn-dark-blue">
												Dark Blue
											</button>
											<button type="button" class="btn btn-yellow">
												Yellow
											</button>
											<button type="button" class="btn btn-light-yellow">
												Light Yellow
											</button>
											<button type="button" class="btn btn-dark-yellow">
												Dark Yellow
											</button>
											<button type="button" class="btn btn-purple">
												Purple
											</button>
											<button type="button" class="btn btn-light-purple">
												Light Purple
											</button>
											<button type="button" class="btn btn-dark-purple">
												Dark Purple
											</button>
											<button type="button" class="btn btn-grey">
												Grey
											</button>
											<button type="button" class="btn btn-light-grey">
												Light Grey
											</button>
											<button type="button" class="btn btn-dark-grey">
												Dark Grey
											</button>
										</p>
										<h5>Square <span class="text-bold">Buttons</span></h5>
										<p>
											Do you like the square buttons? Add <code> .btn-squared </code>
											to it
										</p>
										<p class="space20">
											<!-- Standard grey button with gradient -->
											<button type="button" class="btn btn-default btn-squared">
												Squared
											</button>
											<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
											<button type="button" class="btn btn-primary btn-squared">
												Squared
											</button>
											<!-- Indicates a successful or positive action -->
											<button type="button" class="btn btn-success btn-squared btn-lg">
												Squared
											</button>
											<!-- Contextual button for informational alert messages -->
											<button type="button" class="btn btn-info btn-squared btn-lg">
												Squared <i class="fa fa-arrow-circle-right"></i>
											</button>
										</p>
										<h5>Disabled <span class="text-bold">State</span></h5>
										<p>
											Add the <code> disabled </code>
											attribute to <code> &lt;button&gt; </code>
											buttons.
										</p>
										<p class="space20">
											<button type="button" class="btn btn-primary" disabled="disabled">
												Disabled
											</button>
											<button type="button" class="btn btn-azure" disabled="disabled">
												Disabled
											</button>
											<button type="button" class="btn btn-beige" disabled="disabled">
												Disabled
											</button>
										</p>
										<h5>Sizes</h5>
										<p>
											Fancy larger or smaller buttons? Add <code> .btn-lg </code>
											, <code> .btn-sm </code>
											, or <code> .btn-xs </code>
											for additional sizes.
										</p>
										<p class="space20">
											<button type="button" class="btn btn-red btn-lg">
												Large button
											</button>
											<button type="button" class="btn btn-green btn-sm">
												Small button
											</button>
											<button type="button" class="btn btn-blue btn-xs">
												Extra small button
											</button>
										</p>
										<h5>Button <span class="text-bold">tags</span></h5>
										<p>
											Use the button classes on an <code> &lt;a&gt; </code>
											, <code> &lt;button&gt; </code>
											, or <code> &lt;input&gt; </code>
											element.
										</p>
										<p class="space20">
											<button class="btn btn-purple">
												Button <i class="fa fa-arrow-circle-right"></i>
											</button>
											<input type="submit" value="Submit" class="btn btn-red">
											<a class="btn btn-dark-grey" href="#">
												Go to link <i class="fa fa-arrow-circle-right"></i>
											</a>
										</p>
										<h5>Button <span class="text-bold">groups</span></h5>
										<p>
											Wrap a series of buttons with <code> .btn </code>
											in <code> .btn-group </code>
											.
										</p>
										<div class="space12">
											<div class="btn-group btn-group-lg">
												<a class="btn btn-default active" href="javascript:;">
													Tools
												</a>
												<a class="btn btn-default hidden-xs" href="javascript:;">
													Settings
												</a>
												<a class="btn btn-default" href="javascript:;">
													Help
												</a>
												<a class="btn btn-default" href="javascript:;">
													Contact
												</a>
											</div>
										</div>
										<div class="space12">
											<div class="btn-group">
												<a class="btn btn-azure active" href="javascript:;">
													Tools
												</a>
												<a class="btn btn-azure hidden-xs" href="javascript:;">
													Settings
												</a>
												<a class="btn btn-azure" href="javascript:;">
													Help
												</a>
												<a class="btn btn-azure" href="javascript:;">
													Contact
												</a>
											</div>
										</div>
										<div class="space12">
											<div class="btn-group btn-group-sm">
												<a class="btn btn-red active" href="javascript:;">
													Tools
												</a>
												<a class="btn btn-red" href="javascript:;">
													Settings
												</a>
												<a class="btn btn-red" href="javascript:;">
													Help
												</a>
												<a class="btn btn-red" href="javascript:;">
													Contact
												</a>
											</div>
										</div>
										<div class="space12">
											<div class="btn-group btn-group-xs">
												<a class="btn btn-green active" href="javascript:;">
													Tools
												</a>
												<a class="btn btn-green" href="javascript:;">
													Settings
												</a>
												<a class="btn btn-green" href="javascript:;">
													Help
												</a>
												<a class="btn btn-green" href="javascript:;">
													Contact
												</a>
											</div>
										</div>
										<div class="space12">
											<div class="btn-group-vertical">
												<a class="btn btn-orange" href="javascript:;">
													Tools
												</a>
												<a class="btn btn-orange active" href="javascript:;">
													Settings
												</a>
												<a class="btn btn-orange" href="javascript:;">
													Help
												</a>
												<a class="btn btn-orange" href="javascript:;">
													Contact
												</a>
											</div>
										</div>
									</div>
								</div>
								<!-- end: BUTTONS PANEL-->
								<!-- start: BUTTONS WITH ICONS PANEL -->
								<div class="panel panel-white">
									<div class="panel-heading">
										<h4 class="panel-title">Buttons with <span class="text-bold">icons</span></h4>
										<div class="panel-tools">										
											<div class="dropdown">
											<a data-toggle="dropdown" class="btn btn-xs dropdown-toggle btn-transparent-grey">
												<i class="fa fa-cog"></i>
											</a>
											<ul class="dropdown-menu dropdown-light pull-right" role="menu">
												<li>
													<a class="panel-collapse collapses" href="#"><i class="fa fa-angle-up"></i> <span>Collapse</span> </a>
												</li>
												<li>
													<a class="panel-refresh" href="#"> <i class="fa fa-refresh"></i> <span>Refresh</span> </a>
												</li>
												<li>
													<a class="panel-config" href="#panel-config" data-toggle="modal"> <i class="fa fa-wrench"></i> <span>Configurations</span></a>
												</li>
												<li>
													<a class="panel-expand" href="#"> <i class="fa fa-expand"></i> <span>Fullscreen</span></a>
												</li>										
											</ul>
											</div>
											<a class="btn btn-xs btn-link panel-close" href="#"> <i class="fa fa-times"></i> </a>
										</div>
									</div>
									<div class="panel-body buttons-widget">
										<p>
											Examples to use buttons with font awesome icons.
										</p>
										<p>
											<a class="btn btn-primary" href="#"><i class="fa fa-share"></i></a>
											<a class="btn btn-red" href="#"><i class="fa fa-times fa fa-white"></i></a>
											<a class="btn btn-blue" href="#"><i class="fa fa-arrow-circle-right"></i></a>
											<a class="btn btn-green" href="#"><i class="fa fa-user fa fa-white"></i></a>
										</p>
										<p>
											Examples to use buttons with glyphicon halflings icons.
										</p>
										<p>
											<a class="btn btn-primary" href="#"><i class="glyphicon glyphicon-log-in"></i></a>
											<a class="btn btn-red" href="#"><i class="glyphicon glyphicon-remove-circle"></i></a>
											<a class="btn btn-blue" href="#"><i class="glyphicon glyphicon-thumbs-up"></i></a>
											<a class="btn btn-green" href="#"><i class="glyphicon glyphicon-ok-sign"></i></a>
										</p>
										<p>
											Buttons with both text and icon.
										</p>
										<p>
											<a class="btn btn-xs btn-red" href="#"><i class="fa fa-trash-o"></i> Delete Item</a>
											<a class="btn btn-primary" href="#"><i class="fa fa-plus"></i> Add Item</a>
											<a class="btn btn-purple">
												Listen <i class="fa fa-headphones"></i>
											</a>
										</p>
										<p>
											<a class="btn btn-blue" href="#"><i class="fa fa-plus"></i> Submit Entry</a>
											<a class="btn btn-purple btn-lg">
												pricing options <i class="fa fa-arrow-circle-right"></i>
											</a>
										</p>
										<p>
											Navigation icons.
										</p>
										<p>
											<a class="btn btn-light-grey" href="#"><i class="fa fa-arrow-circle-left"></i></a>
											<a class="btn btn-green" href="#"><i class="fa fa-arrow-circle-right"></i></a>
											<a class="btn btn-blue" href="#"><i class="fa fa-arrow-circle-up"></i></a>
											<a class="btn btn-dark-grey" href="#"><i class="fa fa-arrow-circle-down"></i></a>
										</p>
										<p>
											<a class="btn btn-light-grey btn-lg" href="#"><i class="fa fa-arrow-circle-left"></i></a>
											<a class="btn btn-green btn-lg" href="#"><i class="fa fa-arrow-circle-right"></i></a>
											<a class="btn btn-blue btn-lg" href="#"><i class="fa fa-arrow-circle-up"></i></a>
											<a class="btn btn-dark-grey btn-lg" href="#"><i class="fa fa-arrow-circle-down"></i></a>
										</p>
										<p>
											Toolbar icon example
										</p>
										<div class="space12">
											<div class="btn-group">
												<button class="btn btn-primary">
													<i class="fa fa-step-backward"></i>
												</button>
												<button class="btn btn-primary hidden-xs">
													<i class="fa fa-fast-backward"></i>
												</button>
												<button class="btn btn-primary">
													<i class="fa fa-backward"></i>
												</button>
												<button class="btn btn-primary">
													<i class="fa fa-play"></i>
												</button>
												<button class="btn btn-primary">
													<i class="fa fa-stop"></i>
												</button>
												<button class="btn btn-primary">
													<i class="fa fa-forward"></i>
												</button>
												<button class="btn btn-primary hidden-xs">
													<i class="fa fa-fast-forward"></i>
												</button>
												<button class="btn btn-primary">
													<i class="fa fa-step-forward"></i>
												</button>
											</div>
										</div>
									</div>
								</div>
								<!-- end: BUTTONS WITH ICONS PANEL -->
								<!-- start: SOCIAL BUTTONS -->
								<div class="panel panel-white">
									<div class="panel-heading">
										<i class="fa fa-external-link-square"></i>
										Social Buttons
										<div class="panel-tools">										
											<div class="dropdown">
											<a data-toggle="dropdown" class="btn btn-xs dropdown-toggle btn-transparent-grey">
												<i class="fa fa-cog"></i>
											</a>
											<ul class="dropdown-menu dropdown-light pull-right" role="menu">
												<li>
													<a class="panel-collapse collapses" href="#"><i class="fa fa-angle-up"></i> <span>Collapse</span> </a>
												</li>
												<li>
													<a class="panel-refresh" href="#"> <i class="fa fa-refresh"></i> <span>Refresh</span> </a>
												</li>
												<li>
													<a class="panel-config" href="#panel-config" data-toggle="modal"> <i class="fa fa-wrench"></i> <span>Configurations</span></a>
												</li>
												<li>
													<a class="panel-expand" href="#"> <i class="fa fa-expand"></i> <span>Fullscreen</span></a>
												</li>										
											</ul>
											</div>
											<a class="btn btn-xs btn-link panel-close" href="#"> <i class="fa fa-times"></i> </a>
										</div>
									</div>
									<div class="panel-body buttons-widget">
										<p>
											Only Icons
										</p>
										<p>
											<a class="btn btn-social-icon btn-adn"><i class="fa fa-adn"></i></a>
											<a class="btn btn-social-icon btn-bitbucket"><i class="fa fa-bitbucket"></i></a>
											<a class="btn btn-social-icon btn-dropbox"><i class="fa fa-dropbox"></i></a>
											<a class="btn btn-social-icon btn-facebook"><i class="fa fa-facebook"></i></a>
											<a class="btn btn-social-icon btn-flickr"><i class="fa fa-flickr"></i></a>
											<a class="btn btn-social-icon btn-foursquare"><i class="fa fa-foursquare"></i></a>
											<a class="btn btn-social-icon btn-github"><i class="fa fa-github"></i></a>
											<a class="btn btn-social-icon btn-google-plus"><i class="fa fa-google-plus"></i></a>
											<a class="btn btn-social-icon btn-instagram"><i class="fa fa-instagram"></i></a>
											<a class="btn btn-social-icon btn-linkedin"><i class="fa fa-linkedin"></i></a>
											<a class="btn btn-social-icon btn-microsoft"><i class="fa fa-windows"></i></a>
											<a class="btn btn-social-icon btn-openid"><i class="fa fa-openid"></i></a>
											<a class="btn btn-social-icon btn-reddit"><i class="fa fa-reddit"></i></a>
											<a class="btn btn-social-icon btn-soundcloud"><i class="fa fa-soundcloud"></i></a>
											<a class="btn btn-social-icon btn-tumblr"><i class="fa fa-tumblr"></i></a>
											<a class="btn btn-social-icon btn-twitter"><i class="fa fa-twitter"></i></a>
											<a class="btn btn-social-icon btn-vimeo"><i class="fa fa-vimeo-square"></i></a>
											<a class="btn btn-social-icon btn-vk"><i class="fa fa-vk"></i></a>
											<a class="btn btn-social-icon btn-yahoo"><i class="fa fa-yahoo"></i></a>
										</p>
										<p>
											Icons and Text
										</p>
										<p>
											<a class="btn btn-social btn-facebook"><i class="fa fa-facebook"></i> Sign in with Facebook</a>
											<a class="btn btn-social btn-twitter"><i class="fa fa-twitter"></i> Sign in with Twitter</a>
											<a class="btn btn-social btn-flickr"><i class="fa fa-flickr"></i> Sign in with Flickr</a>
											<a class="btn btn-social btn-google-plus"><i class="fa fa-google-plus"></i> Sign in with Google</a>
										</p>
										<p>
											Animated Icons
										</p>
										<div class="social-icons">
											<ul>
												<li class="social-twitter tooltips" data-original-title="Twitter" data-placement="top">
													<a target="_blank" href="http://www.twitter.com">
														Twitter
													</a>
												</li>
												<li class="social-dribbble tooltips" data-original-title="Dribbble" data-placement="top">
													<a target="_blank" href="http://dribbble.com">
														Dribbble
													</a>
												</li>
												<li class="social-facebook tooltips" data-original-title="Facebook" data-placement="top">
													<a target="_blank" href="http://facebook.com">
														Facebook
													</a>
												</li>
												<li class="social-google tooltips" data-original-title="Google" data-placement="top">
													<a target="_blank" href="http://google.com">
														Google+
													</a>
												</li>
												<li class="social-linkedin tooltips" data-original-title="LinkedIn" data-placement="top">
													<a target="_blank" href="http://linkedin.com">
														LinkedIn
													</a>
												</li>
												<li class="social-youtube tooltips" data-original-title="YouTube" data-placement="top">
													<a target="_blank" href="http://youtube.com/">
														YouTube
													</a>
												</li>
												<li class="social-rss tooltips" data-original-title="RSS" data-placement="top">
													<a target="_blank" href="#" >
														RSS
													</a>
												</li>
												<li class="social-behance tooltips" data-original-title="Behance" data-placement="top">
													<a target="_blank" href="#" >
														Behance
													</a>
												</li>
												<li class="social-dropbox tooltips" data-original-title="Dropbox" data-placement="top">
													<a target="_blank" href="#" >
														Dropbox
													</a>
												</li>
												<li class="social-github tooltips" data-original-title="Github" data-placement="top">
													<a target="_blank" href="#" >
														Github
													</a>
												</li>
												<li class="social-spotify tooltips" data-original-title="Spotify" data-placement="top">
													<a target="_blank" href="#" >
														Spotify
													</a>
												</li>
												<li class="social-stumbleupon tooltips" data-original-title="Stumbleupon" data-placement="top">
													<a target="_blank" href="#" >
														Stumbleupon
													</a>
												</li>
												<li class="social-skype tooltips" data-original-title="Skype" data-placement="top">
													<a target="_blank" href="#" >
														Skype
													</a>
												</li>
												<li class="social-tumblr tooltips" data-original-title="Tumblr" data-placement="top">
													<a target="_blank" href="#" >
														Tumblr
													</a>
												</li>
												<li class="social-spotify tooltips" data-original-title="Spotify" data-placement="top">
													<a target="_blank" href="#" >
														Spotify
													</a>
												</li>
												<li class="social-vimeo tooltips" data-original-title="Vimeo" data-placement="top">
													<a target="_blank" href="#" >
														Vimeo
													</a>
												</li>
												<li class="social-wordpress tooltips" data-original-title="Wordpress" data-placement="top">
													<a target="_blank" href="#" >
														Wordpress
													</a>
												</li>
												<li class="social-xing tooltips" data-original-title="Xing" data-placement="top">
													<a target="_blank" href="#" >
														Xing
													</a>
												</li>
												<li class="social-yahoo tooltips" data-original-title="Yahoo" data-placement="top">
													<a target="_blank" href="#" >
														Yahoo
													</a>
												</li>
												<li class="social-vk tooltips" data-original-title="VK" data-placement="top">
													<a target="_blank" href="#" >
														VK
													</a>
												</li>
												<li class="social-instagram tooltips" data-original-title="Instagram" data-placement="top">
													<a target="_blank" href="#" >
														Instagram
													</a>
												</li>
												<li class="social-reddit tooltips" data-original-title="Reddit" data-placement="top">
													<a target="_blank" href="#" >
														Reddit
													</a>
												</li>
												<li class="social-flickr tooltips" data-original-title="Flickr" data-placement="top">
													<a target="_blank" href="#" >
														Flickr
													</a>
												</li>
												<li class="social-foursquare tooltips" data-original-title="Foursquare" data-placement="top">
													<a target="_blank" href="#" >
														Foursquare
													</a>
												</li>
											</ul>
										</div>
									</div>
								</div>
								<!-- end: SOCIAL BUTTONS -->
							</div>
							<div class="col-sm-6">
								<!-- start: BUTTONS WITH LOADING INDICATOR PANEL -->
								<div class="panel panel-white">
									<div class="panel-heading">
										<h4 class="panel-title">Buttons with <span class="text-bold">loading</span> indicator</h4>
										<div class="panel-tools">										
											<div class="dropdown">
											<a data-toggle="dropdown" class="btn btn-xs dropdown-toggle btn-transparent-grey">
												<i class="fa fa-cog"></i>
											</a>
											<ul class="dropdown-menu dropdown-light pull-right" role="menu">
												<li>
													<a class="panel-collapse collapses" href="#"><i class="fa fa-angle-up"></i> <span>Collapse</span> </a>
												</li>
												<li>
													<a class="panel-refresh" href="#"> <i class="fa fa-refresh"></i> <span>Refresh</span> </a>
												</li>
												<li>
													<a class="panel-config" href="#panel-config" data-toggle="modal"> <i class="fa fa-wrench"></i> <span>Configurations</span></a>
												</li>
												<li>
													<a class="panel-expand" href="#"> <i class="fa fa-expand"></i> <span>Fullscreen</span></a>
												</li>										
											</ul>
											</div>
											<a class="btn btn-xs btn-link panel-close" href="#"> <i class="fa fa-times"></i> </a>
										</div>
									</div>
									<div class="panel-body buttons-widget">
										<p>
											A UI concept which merges loading indicators into the action that invoked them. <span class="text-bold">Click the buttons to see the effect.</span>
										</p>
										<p>
											<button data-style="expand-left" class="ladda-button" data-color="green">
												expand <i class="fa fa-arrow-circle-left"></i>
											</button>
											<button data-style="expand-right" class="ladda-button" data-color="green">
												expand <i class="fa fa-arrow-circle-right"></i>
											</button>
											<button data-style="expand-up" class="ladda-button" data-color="green">
												expand <i class="fa fa-arrow-circle-up"></i>
											</button>
											<button data-style="expand-down" class="ladda-button" data-color="green">
												expand <i class="fa fa-arrow-circle-down"></i>
											</button>
										</p>
										<p>
											<button data-style="contract" class="ladda-button" data-color="red">
												contract
											</button>
											<button data-style="contract-overlay" class="ladda-button" data-color="red">
												overlay
											</button>
											<button data-style="zoom-in" class="ladda-button" data-color="red">
												zoom-in
											</button>
											<button data-style="zoom-out" class="ladda-button" data-color="red">
												zoom-out
											</button>
										</p>
										<p>
											<button data-style="slide-left" class="ladda-button" data-color="blue">
												slide-left
											</button>
											<button data-style="slide-right" class="ladda-button" data-color="blue">
												slide-right
											</button>
											<button data-style="slide-up" class="ladda-button" data-color="blue">
												slide-up
											</button>
											<button data-style="slide-down" class="ladda-button" data-color="blue">
												slide-down
											</button>
										</p>
										<h5> Built-in progress bar </h5>
										<p class="progress-demo">
											<button data-style="expand-right" class="ladda-button" data-color="mint">
												Expand
											</button>
											<button data-style="contract" class="ladda-button" data-color="mint">
												Contract
											</button>
										</p>
										<h5> Sizes </h5>
										<p class="progress-demo">
											<button class="ladda-button" data-color="mint" data-style="expand-right" data-size="xs">
												Extra Small
											</button>
											<button class="ladda-button" data-color="mint" data-style="expand-right" data-size="s">
												Small
											</button>
											<button class="ladda-button" data-color="mint" data-style="expand-right" data-size="l">
												Large
											</button>
											<button class="ladda-button" data-color="mint" data-style="expand-right" data-size="xl">
												Extra Large
											</button>
										</p>
									</div>
								</div>
								<!-- end: BUTTONS WITH LOADING INDICATOR PANEL -->
								<!-- start: SWITCH PANEL -->
								<div class="panel panel-white">
									<div class="panel-heading">
										<h4 class="panel-title">Switch <span class="text-bold">Buttons</span></h4>
										<div class="panel-tools">										
											<div class="dropdown">
											<a data-toggle="dropdown" class="btn btn-xs dropdown-toggle btn-transparent-grey">
												<i class="fa fa-cog"></i>
											</a>
											<ul class="dropdown-menu dropdown-light pull-right" role="menu">
												<li>
													<a class="panel-collapse collapses" href="#"><i class="fa fa-angle-up"></i> <span>Collapse</span> </a>
												</li>
												<li>
													<a class="panel-refresh" href="#"> <i class="fa fa-refresh"></i> <span>Refresh</span> </a>
												</li>
												<li>
													<a class="panel-config" href="#panel-config" data-toggle="modal"> <i class="fa fa-wrench"></i> <span>Configurations</span></a>
												</li>
												<li>
													<a class="panel-expand" href="#"> <i class="fa fa-expand"></i> <span>Fullscreen</span></a>
												</li>										
											</ul>
											</div>
											<a class="btn btn-xs btn-link panel-close" href="#"> <i class="fa fa-times"></i> </a>
										</div>
									</div>
									<div class="panel-body buttons-widget">
										<p>
											Turn checkboxes and radio buttons in toggle switches.
										</p>
										<input type="checkbox" class="make-switch" data-on-color="primary" checked>
										<input type="checkbox" class="make-switch" data-on-color="info" checked>
										<input type="checkbox"  class="make-switch" data-on-color="success" data-off-color="danger" data-on-text="YES" data-off-text="NO" checked>
										<input type="checkbox" class="make-switch" data-on-color="danger" checked>
										<input type="checkbox" class="make-switch" data-on-color="warning" checked>
										<input type="checkbox" class="make-switch" checked data-on-text="<i class='fa fa-check'></i>" data-off-text="<i class='fa fa-times'></i>">
									</div>
								</div>
								<!-- end: SWITCH PANEL -->
								<!-- start: BLOCK BUTTONS PANEL -->
								<div class="panel panel-white">
									<div class="panel-heading">
										<h4 class="panel-title">Block level <span class="text-bold">buttons</span></h4>
										<div class="panel-tools">										
											<div class="dropdown">
											<a data-toggle="dropdown" class="btn btn-xs dropdown-toggle btn-transparent-grey">
												<i class="fa fa-cog"></i>
											</a>
											<ul class="dropdown-menu dropdown-light pull-right" role="menu">
												<li>
													<a class="panel-collapse collapses" href="#"><i class="fa fa-angle-up"></i> <span>Collapse</span> </a>
												</li>
												<li>
													<a class="panel-refresh" href="#"> <i class="fa fa-refresh"></i> <span>Refresh</span> </a>
												</li>
												<li>
													<a class="panel-config" href="#panel-config" data-toggle="modal"> <i class="fa fa-wrench"></i> <span>Configurations</span></a>
												</li>
												<li>
													<a class="panel-expand" href="#"> <i class="fa fa-expand"></i> <span>Fullscreen</span></a>
												</li>										
											</ul>
											</div>
											<a class="btn btn-xs btn-link panel-close" href="#"> <i class="fa fa-times"></i> </a>
										</div>
									</div>
									<div class="panel-body">
										<p>
											Create block level buttons&mdash;those that span the full width of a parent&mdash; by adding <code> .btn-block </code>
											.
										</p>
										<p>
											<button class="btn btn-blue btn-block">
												Button <i class="fa fa-arrow-circle-right"></i>
											</button>
											<input type="submit" value="Submit" class="btn btn-blue btn-block">
											<a class="btn btn-blue btn-block" href="#">
												Link <i class="fa fa-arrow-circle-right"></i>
											</a>
										</p>
										<p>
											<button class="btn btn-green btn-lg btn-block">
												Button (big) <i class="fa fa-arrow-circle-right"></i>
											</button>
											<input type="submit" value="Submit (big)" class="btn btn-green btn-lg btn-block">
											<a class="btn btn-green btn-lg btn-block" href="#">
												Link (big) <i class="fa fa-arrow-circle-right"></i>
											</a>
										</p>
										<div class="space12">
											<div class="btn-group btn-group-justified">
												<a class="btn btn-purple" href="javascript:;">
													Tools
												</a>
												<a class="btn btn-green active" href="javascript:;">
													Help
												</a>
												<a class="btn btn-blue" href="javascript:;">
													Contact
												</a>
											</div>
										</div>
									</div>
								</div>
								<!-- end: BLOCK BUTTONS PANEL -->
								<!-- start: DROPDOWNS PANEL -->
								<div class="panel panel-white">
									<div class="panel-heading">
										<h4 class="panel-title">Dropdown</h4>
										<div class="panel-tools">										
											<div class="dropdown">
											<a data-toggle="dropdown" class="btn btn-xs dropdown-toggle btn-transparent-grey">
												<i class="fa fa-cog"></i>
											</a>
											<ul class="dropdown-menu dropdown-light pull-right" role="menu">
												<li>
													<a class="panel-collapse collapses" href="#"><i class="fa fa-angle-up"></i> <span>Collapse</span> </a>
												</li>
												<li>
													<a class="panel-refresh" href="#"> <i class="fa fa-refresh"></i> <span>Refresh</span> </a>
												</li>
												<li>
													<a class="panel-config" href="#panel-config" data-toggle="modal"> <i class="fa fa-wrench"></i> <span>Configurations</span></a>
												</li>
												<li>
													<a class="panel-expand" href="#"> <i class="fa fa-expand"></i> <span>Fullscreen</span></a>
												</li>										
											</ul>
											</div>
											<a class="btn btn-xs btn-link panel-close" href="#"> <i class="fa fa-times"></i> </a>
										</div>
									</div>
									<div class="panel-body buttons-widget">
										<div class="space20">
											<h5> Dropdown <span class="text-bold">buttons</span></h5>
											<p>
												Use any button to trigger a dropdown menu by placing it within a <code> .btn-group </code>
												and providing the proper menu markup.
											</p>
											<div class="btn-group">
												<a href="#" data-toggle="dropdown" class="btn btn-primary dropdown-toggle">
													Tools <span class="caret"></span>
												</a>
												<ul class="dropdown-menu" role="menu">
													<li role="presentation" class="dropdown-header">
														Dropdown header
													</li>
													<li>
														<a href="#">
															Action
														</a>
													</li>
													<li>
														<a href="#">
															Another action
														</a>
													</li>
													<li>
														<a href="#">
															Something else here
														</a>
													</li>
													<li class="divider"></li>
													<li role="presentation" class="dropdown-header">
														Dropdown header
													</li>
													<li>
														<a href="#">
															Separated link
														</a>
													</li>
												</ul>
											</div>
											<div class="btn-group">
												<button data-toggle="dropdown" class="btn btn-red dropdown-toggle">
													Help <span class="caret"></span>
												</button>
												<ul class="dropdown-menu" role="menu">
													<li role="presentation" class="dropdown-header">
														Dropdown header
													</li>
													<li>
														<a href="#">
															Action
														</a>
													</li>
													<li>
														<a href="#">
															Another action
														</a>
													</li>
													<li>
														<a href="#">
															Something else here
														</a>
													</li>
													<li class="divider"></li>
													<li role="presentation" class="dropdown-header">
														Dropdown header
													</li>
													<li>
														<a href="#">
															Separated link
														</a>
													</li>
												</ul>
											</div>
											<div class="btn-group">
												<button data-toggle="dropdown" class="btn btn-purple dropdown-toggle">
													Tools <span class="caret"></span>
												</button>
												<ul class="dropdown-menu" role="menu">
													<li role="presentation" class="dropdown-header">
														Dropdown header
													</li>
													<li>
														<a href="#">
															Action
														</a>
													</li>
													<li>
														<a href="#">
															Another action
														</a>
													</li>
													<li>
														<a href="#">
															Something else here
														</a>
													</li>
													<li class="divider"></li>
													<li role="presentation" class="dropdown-header">
														Dropdown header
													</li>
													<li>
														<a href="#">
															Separated link
														</a>
													</li>
												</ul>
											</div>
										</div>
										<div class="space20">
											<h5> Split button <span class="text-bold">dropdowns</span></h5>
											<p>
												Similarly, create split button dropdowns with the same markup changes, only with a separate button.
											</p>
											<div class="btn-group">
												<button type="button" class="btn btn-danger">
													Tools
												</button>
												<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
													<span class="caret"></span>
												</button>
												<ul class="dropdown-menu" role="menu">
													<li role="presentation" class="dropdown-header">
														Dropdown header
													</li>
													<li>
														<a href="#">
															Action
														</a>
													</li>
													<li>
														<a href="#">
															Another action
														</a>
													</li>
													<li>
														<a href="#">
															Something else here
														</a>
													</li>
													<li class="divider"></li>
													<li role="presentation" class="dropdown-header">
														Dropdown header
													</li>
													<li>
														<a href="#">
															Separated link
														</a>
													</li>
												</ul>
											</div>
											<div class="btn-group">
												<button type="button" class="btn btn-purple">
													Help
												</button>
												<button type="button" class="btn btn-purple dropdown-toggle" data-toggle="dropdown">
													<span class="caret"></span>
												</button>
												<ul class="dropdown-menu" role="menu">
													<li role="presentation" class="dropdown-header">
														Dropdown header
													</li>
													<li>
														<a href="#">
															Action
														</a>
													</li>
													<li>
														<a href="#">
															Another action
														</a>
													</li>
													<li>
														<a href="#">
															Something else here
														</a>
													</li>
													<li class="divider"></li>
													<li role="presentation" class="dropdown-header">
														Dropdown header
													</li>
													<li>
														<a href="#">
															Separated link
														</a>
													</li>
												</ul>
											</div>
											<div class="btn-group">
												<button type="button" class="btn btn-green">
													Tools
												</button>
												<button type="button" class="btn btn-green dropdown-toggle" data-toggle="dropdown">
													<span class="caret"></span>
												</button>
												<ul class="dropdown-menu" role="menu">
													<li role="presentation" class="dropdown-header">
														Dropdown header
													</li>
													<li>
														<a href="#">
															Action
														</a>
													</li>
													<li>
														<a href="#">
															Another action
														</a>
													</li>
													<li>
														<a href="#">
															Something else here
														</a>
													</li>
													<li class="divider"></li>
													<li role="presentation" class="dropdown-header">
														Dropdown header
													</li>
													<li>
														<a href="#">
															Separated link
														</a>
													</li>
												</ul>
											</div>
										</div>
										<div class="space20">
											<h5> Dropdown button with <span class="text-bold">icons</span></h5>
											<p>
												Examples to use dropdown with font awesome icons.
											</p>
											<div class="btn-group">
												<button data-toggle="dropdown" class="btn btn-red dropdown-toggle">
													<i class="fa fa-user"></i>
													User <span class="caret"></span>
												</button>
												<ul class="dropdown-menu" role="menu">
													<li>
														<a href="#">
															<i class="fa fa-pencil"></i> Edit
														</a>
													</li>
													<li>
														<a href="#">
															<i class="fa fa-trash-o"></i> Delete
														</a>
													</li>
													<li>
														<a href="#">
															<i class="fa fa-ban"></i> Ban
														</a>
													</li>
													<li class="divider"></li>
													<li>
														<a href="#">
															<i class="i"></i> Make admin
														</a>
													</li>
												</ul>
											</div>
											<div class="btn-group">
												<button type="button" class="btn btn-purple">
													<i class="fa fa-wrench"></i>
													Setting
												</button>
												<button data-toggle="dropdown" class="btn btn-purple dropdown-toggle">
													<span class="caret"></span>
												</button>
												<ul class="dropdown-menu" role="menu">
													<li>
														<a href="#">
															<i class="fa fa-pencil"></i> Edit
														</a>
													</li>
													<li>
														<a href="#">
															<i class="fa fa-trash-o"></i> Delete
														</a>
													</li>
													<li>
														<a href="#">
															<i class="fa fa-ban"></i> Ban
														</a>
													</li>
													<li class="divider"></li>
													<li>
														<a href="#">
															<i class="i"></i> Make admin
														</a>
													</li>
												</ul>
											</div>
										</div>
										<div class="space20">
											<h5> Sizing </h5>
											<p>
												Button dropdowns work with buttons of all sizes.
											</p>
											<div class="btn-group">
												<a class="btn btn-grey btn-lg dropdown-toggle" data-toggle="dropdown" href="#">
													Large Button <span class="caret"></span>
												</a>
												<ul role="menu" class="dropdown-menu">
													<li class="dropdown-header" role="presentation">
														Dropdown header
													</li>
													<li>
														<a href="#">
															Action
														</a>
													</li>
													<li>
														<a href="#">
															Another action
														</a>
													</li>
													<li>
														<a href="#">
															Something else here
														</a>
													</li>
													<li class="divider"></li>
													<li class="dropdown-header" role="presentation">
														Dropdown header
													</li>
													<li>
														<a href="#">
															Separated link
														</a>
													</li>
												</ul>
											</div>
											<div class="btn-group">
												<button class="btn btn-light-grey btn-sm dropdown-toggle" data-toggle="dropdown">
													Small Button <span class="caret"></span>
												</button>
												<ul role="menu" class="dropdown-menu">
													<li class="dropdown-header" role="presentation">
														Dropdown header
													</li>
													<li>
														<a href="#">
															Action
														</a>
													</li>
													<li>
														<a href="#">
															Another action
														</a>
													</li>
													<li>
														<a href="#">
															Something else here
														</a>
													</li>
													<li class="divider"></li>
													<li class="dropdown-header" role="presentation">
														Dropdown header
													</li>
													<li>
														<a href="#">
															Separated link
														</a>
													</li>
												</ul>
											</div>
											<div class="btn-group">
												<button class="btn btn-dark-grey btn-xs dropdown-toggle" data-toggle="dropdown">
													Extra Small Button <span class="caret"></span>
												</button>
												<ul role="menu" class="dropdown-menu">
													<li class="dropdown-header" role="presentation">
														Dropdown header
													</li>
													<li>
														<a href="#">
															Action
														</a>
													</li>
													<li>
														<a href="#">
															Another action
														</a>
													</li>
													<li>
														<a href="#">
															Something else here
														</a>
													</li>
													<li class="divider"></li>
													<li class="dropdown-header" role="presentation">
														Dropdown header
													</li>
													<li>
														<a href="#">
															Separated link
														</a>
													</li>
												</ul>
											</div>
										</div>
										<div class="space20">
											<h5> Dropdowns <span class="text-bold">button groups</span></h5>
											<div class="space12">
												<div class="btn-group">
													<div class="btn-group">
														<button type="button" class="btn btn-azure dropdown-toggle" data-toggle="dropdown">
															Dropdown <span class="caret"></span>
														</button>
														<ul class="dropdown-menu">
															<li>
																<a href="#">
																	Dropdown link
																</a>
															</li>
															<li>
																<a href="#">
																	Dropdown link
																</a>
															</li>
														</ul>
													</div>
													<div class="btn-group hidden-xs">
														<button type="button" class="btn btn-azure dropdown-toggle" data-toggle="dropdown">
															Dropdown <span class="caret"></span>
														</button>
														<ul class="dropdown-menu">
															<li>
																<a href="#">
																	Dropdown link
																</a>
															</li>
															<li>
																<a href="#">
																	Dropdown link
																</a>
															</li>
														</ul>
													</div>
													<div class="btn-group">
														<button type="button" class="btn btn-azure dropdown-toggle" data-toggle="dropdown">
															Dropdown <span class="caret"></span>
														</button>
														<ul class="dropdown-menu">
															<li>
																<a href="#">
																	Dropdown link
																</a>
															</li>
															<li>
																<a href="#">
																	Dropdown link
																</a>
															</li>
														</ul>
													</div>
												</div>
											</div>
											<div class="space12">
												<div class="btn-group">
													<button type="button" class="btn btn-default">
														1
													</button>
													<button type="button" class="btn btn-default">
														2
													</button>
													<div class="btn-group">
														<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
															Dropdown <span class="caret"></span>
														</button>
														<ul class="dropdown-menu">
															<li>
																<a href="#">
																	Dropdown link
																</a>
															</li>
															<li>
																<a href="#">
																	Dropdown link
																</a>
															</li>
														</ul>
													</div>
												</div>
											</div>
											<div class="space12">
												<div class="btn-group-vertical">
													<div class="btn-group">
														<button type="button" class="btn btn-dark-grey dropdown-toggle" data-toggle="dropdown">
															Dropdown <span class="caret"></span>
														</button>
														<ul class="dropdown-menu">
															<li>
																<a href="#">
																	Dropdown link
																</a>
															</li>
															<li>
																<a href="#">
																	Dropdown link
																</a>
															</li>
														</ul>
													</div>
													<div class="btn-group">
														<button type="button" class="btn btn-dark-grey dropdown-toggle" data-toggle="dropdown">
															Dropdown <span class="caret"></span>
														</button>
														<ul class="dropdown-menu">
															<li>
																<a href="#">
																	Dropdown link
																</a>
															</li>
															<li>
																<a href="#">
																	Dropdown link
																</a>
															</li>
														</ul>
													</div>
													<div class="btn-group">
														<button type="button" class="btn btn-dark-grey dropdown-toggle" data-toggle="dropdown">
															Dropdown <span class="caret"></span>
														</button>
														<ul class="dropdown-menu">
															<li>
																<a href="#">
																	Dropdown link
																</a>
															</li>
															<li>
																<a href="#">
																	Dropdown link
																</a>
															</li>
														</ul>
													</div>
												</div>
											</div>
										</div>
										<div class="space20">
											<h5> Dropdown with <span class="text-bold">checkboxes</span></h5>
											<div class="space10">
												<div class="btn-group">
													<div class="btn-group">
														<button type="button" class="btn btn-green dropdown-toggle" data-toggle="dropdown">
															Dropdown <span class="caret"></span>
														</button>
														<div class="dropdown-menu dropdown-enduring dropdown-checkboxes">
															<label>
																<input type="checkbox">
																Option 1
															</label>
															<label>
																<input type="checkbox">
																Option 2
															</label>
															<label>
																<input type="checkbox">
																Option 3
															</label>
															<label>
																<input type="checkbox">
																Option 4
															</label>
															<label>
																<input type="checkbox">
																Option 5
															</label>
														</div>
													</div>
													<div class="btn-group">
														<button type="button" class="btn btn-green dropdown-toggle" data-toggle="dropdown">
															Dropdown <span class="caret"></span>
														</button>
														<div class="dropdown-menu dropdown-enduring dropdown-checkboxes">
															<label>
																<input type="checkbox">
																Option 1
															</label>
															<label>
																<input type="checkbox">
																Option 2
															</label>
															<label>
																<input type="checkbox">
																Option 3
															</label>
															<label>
																<input type="checkbox">
																Option 4
															</label>
															<label>
																<input type="checkbox">
																Option 5
															</label>
														</div>
													</div>
												</div>
											</div>
											<p>
												<span class="label label-success"> NOTE: </span>
												&nbsp;
												By adding <code> dropdown-enduring </code>
												class you can avoid closing the dropdown on click
											</p>
										</div>
										<div class="space20">
											<h5> Dropup menu <span class="text-bold">options</span></h5>
											<div class="space10">
												<!-- /btn-group -->
												<div class="btn-group dropup">
													<button type="button" class="btn btn-dark-beige dropdown-toggle" data-toggle="dropdown">
														Dropup <span class="caret"></span>
													</button>
													<ul class="dropdown-menu">
														<li>
															<a href="#">
																Dropup link
															</a>
														</li>
														<li>
															<a href="#">
																Dropup link
															</a>
														</li>
													</ul>
												</div>
												<!-- /btn-group -->
												<div class="btn-group dropup">
													<button type="button" class="btn btn-red">
														Dropup
													</button>
													<button type="button" class="btn btn-red dropdown-toggle" data-toggle="dropdown">
														<span class="caret"></span>
													</button>
													<ul class="dropdown-menu">
														<li>
															<a href="#">
																Dropup link
															</a>
														</li>
														<li>
															<a href="#">
																Dropup link
															</a>
														</li>
													</ul>
												</div>
												<!-- /btn-group -->
											</div>
											<p>
												<span class="label label-success"> NOTE: </span>
												&nbsp;
												By adding <code> dropup </code>
												class you make dropup menu.
											</p>
										</div>
										<div class="space20">
											<h5> Dropdown <span class="text-bold"> Different Styles</span></h5>
											<div class="btn-group">
												<a href="#" data-toggle="dropdown" class="btn btn-dark-grey dropdown-toggle">
													Dark Left <span class="caret"></span>
												</a>
												<ul class="dropdown-menu dropdown-dark" role="menu">
													<li role="presentation" class="dropdown-header">
														Dropdown header
													</li>
													<li>
														<a href="#">
															Action
														</a>
													</li>
													<li>
														<a href="#">
															Another action
														</a>
													</li>
													<li>
														<a href="#">
															Something else here
														</a>
													</li>
													<li role="presentation" class="dropdown-header">
														Dropdown header
													</li>
													<li>
														<a href="#">
															Separated link
														</a>
													</li>
												</ul>
											</div>
											<div class="btn-group">
												<a href="#" data-toggle="dropdown" class="btn btn-dark-grey dropdown-toggle">
													Dark Right <span class="caret"></span>
												</a>
												<ul class="dropdown-menu dropdown-dark pull-right" role="menu">
													<li role="presentation" class="dropdown-header">
														Dropdown header
													</li>
													<li>
														<a href="#">
															Action
														</a>
													</li>
													<li>
														<a href="#">
															Another action
														</a>
													</li>
													<li>
														<a href="#">
															Something else here
														</a>
													</li>
													<li role="presentation" class="dropdown-header">
														Dropdown header
													</li>
													<li>
														<a href="#">
															Separated link
														</a>
													</li>
												</ul>
											</div>
											<div class="btn-group">
												<a href="#" data-toggle="dropdown" class="btn btn-light-grey dropdown-toggle">
													Light Left <span class="caret"></span>
												</a>
												<ul class="dropdown-menu dropdown-light" role="menu">
													<li role="presentation" class="dropdown-header">
														Dropdown header
													</li>
													<li>
														<a href="#">
															Action
														</a>
													</li>
													<li>
														<a href="#">
															Another action
														</a>
													</li>
													<li>
														<a href="#">
															Something else here
														</a>
													</li>
													<li class="divider"></li>
													<li role="presentation" class="dropdown-header">
														Dropdown header
													</li>
													<li>
														<a href="#">
															Separated link
														</a>
													</li>
												</ul>
											</div>
											<div class="btn-group">
												<a href="#" data-toggle="dropdown" class="btn btn-light-grey dropdown-toggle">
													Light Right <span class="caret"></span>
												</a>
												<ul class="dropdown-menu dropdown-light pull-right" role="menu">
													<li role="presentation" class="dropdown-header">
														Dropdown header
													</li>
													<li>
														<a href="#">
															Action
														</a>
													</li>
													<li>
														<a href="#">
															Another action
														</a>
													</li>
													<li>
														<a href="#">
															Something else here
														</a>
													</li>
													<li class="divider"></li>
													<li role="presentation" class="dropdown-header">
														Dropdown header
													</li>
													<li>
														<a href="#">
															Separated link
														</a>
													</li>
												</ul>
											</div>
										</div>
									</div>
								</div>
								<!-- end: DROPDOWNS PANEL -->
							</div>
						</div>
						<div class="row">
							<div class="col-sm-12">
								<!-- start: RESPONSIVE ICONS BUTTONS PANEL -->
								<div class="panel panel-white">
									<div class="panel-heading">
										<i class="fa fa-external-link-square"></i>
										Responsive Icons Buttons
										<div class="panel-tools">										
											<div class="dropdown">
											<a data-toggle="dropdown" class="btn btn-xs dropdown-toggle btn-transparent-grey">
												<i class="fa fa-cog"></i>
											</a>
											<ul class="dropdown-menu dropdown-light pull-right" role="menu">
												<li>
													<a class="panel-collapse collapses" href="#"><i class="fa fa-angle-up"></i> <span>Collapse</span> </a>
												</li>
												<li>
													<a class="panel-refresh" href="#"> <i class="fa fa-refresh"></i> <span>Refresh</span> </a>
												</li>
												<li>
													<a class="panel-config" href="#panel-config" data-toggle="modal"> <i class="fa fa-wrench"></i> <span>Configurations</span></a>
												</li>
												<li>
													<a class="panel-expand" href="#"> <i class="fa fa-expand"></i> <span>Fullscreen</span></a>
												</li>										
											</ul>
											</div>
											<a class="btn btn-xs btn-link panel-close" href="#"> <i class="fa fa-times"></i> </a>
										</div>
									</div>
									<div class="panel-body buttons-widget">
										<div class="row">
											<div class="col-sm-2">
												<button class="btn btn-icon btn-block">
													<i class="fa fa-group"></i>
													Users <span class="badge badge-primary"> 4 </span>
												</button>
											</div>
											<div class="col-sm-4">
												<button class="btn btn-icon btn-block">
													<i class="fa fa-comments-o"></i>
													Comments <span class="badge badge-danger"> 4 </span>
												</button>
											</div>
											<div class="col-sm-3">
												<button class="btn btn-icon btn-block">
													<i class="fa fa-shopping-cart"></i>
													Orders <span class="badge badge-danger"> 4 </span>
												</button>
											</div>
											<div class="col-sm-3">
												<button class="btn btn-icon btn-block">
													<i class="fa fa-barcode"></i>
													Products <span class="badge badge-warning"> 4 </span>
												</button>
											</div>
										</div>
										<div class="row">
											<div class="col-sm-3">
												<button class="btn btn-icon btn-block">
													<i class="fa fa-calendar"></i>
													Calendar <span class="badge badge-success"> 4 </span>
												</button>
											</div>
											<div class="col-sm-3">
												<button class="btn btn-icon btn-block">
													<i class="fa fa-heart-o"></i>
													Favorites <span class="badge badge-danger"> 4 </span>
												</button>
											</div>
											<div class="col-sm-2">
												<button class="btn btn-icon btn-block">
													<i class="fa fa-thumbs-up"></i>
													Likes <span class="badge badge-warning"> 4 </span>
												</button>
											</div>
											<div class="col-sm-4">
												<button class="btn btn-icon btn-block">
													<i class="fa fa-exclamation-triangle"></i>
													Warning <span class="badge badge-success"> 4 </span>
												</button>
											</div>
										</div>
										<div class="row">
											<div class="col-sm-2">
												<button class="btn btn-icon btn-block">
													<i class="fa fa-tasks"></i>
													Tasks <span class="badge badge-danger"> 4 </span>
												</button>
											</div>
											<div class="col-sm-2">
												<button class="btn btn-icon btn-block">
													<i class="fa fa-check"></i>
													To Do <span class="badge badge-success"> 4 </span>
												</button>
											</div>
											<div class="col-sm-2">
												<button class="btn btn-icon btn-block">
													<i class="fa fa-list"></i>
													Tickets <span class="badge badge-warning"> 4 </span>
												</button>
											</div>
											<div class="col-sm-2">
												<button class="btn btn-icon btn-block">
													<i class="fa fa-picture-o"></i>
													Pictures <span class="badge badge-danger"> 4 </span>
												</button>
											</div>
											<div class="col-sm-2">
												<button class="btn btn-icon btn-block">
													<i class="fa fa-upload"></i>
													Upload <span class="badge badge-success"> 4 </span>
												</button>
											</div>
											<div class="col-sm-2">
												<button class="btn btn-icon btn-block">
													<i class="fa fa-tags"></i>
													Tags <span class="badge badge-danger"> 4 </span>
												</button>
											</div>
										</div>
									</div>
								</div>
								<!-- end: RESPONSIVE ICONS BUTTONS PANEL -->
							</div>
						</div>
						<!-- end: PAGE CONTENT-->
					</div>
					<div class="subviews">
						<div class="subviews-container"></div>
					</div>
				</div>
				<!-- end: PAGE -->
			</div>
			<!-- end: MAIN CONTAINER -->
			<!-- start: FOOTER -->
			<footer class="inner">
				<div class="footer-inner">
					<div class="pull-left">
						2014 &copy; Rapido by cliptheme.
					</div>
					<div class="pull-right">
						<span class="go-top"><i class="fa fa-chevron-up"></i></span>
					</div>
				</div>
			</footer>
			<!-- end: FOOTER -->
			<!-- start: SUBVIEW SAMPLE CONTENTS -->
			<!-- *** NEW NOTE *** -->
			<div id="newNote">
				<div class="noteWrap col-md-8 col-md-offset-2">
					<h3>Add new note</h3>
					<form class="form-note">
						<div class="form-group">
							<input class="note-title form-control" name="noteTitle" type="text" placeholder="Note Title...">
						</div>
						<div class="form-group">
							<textarea id="noteEditor" name="noteEditor" class="hide"></textarea>
							<textarea class="summernote" placeholder="Write note here..."></textarea>
						</div>
						<div class="pull-right">
							<div class="btn-group">
								<a href="#" class="btn btn-info close-subview-button">
									Close
								</a>
							</div>
							<div class="btn-group">
								<button class="btn btn-info save-note" type="submit">
									Save
								</button>
							</div>
						</div>
					</form>
				</div>
			</div>
			<!-- *** READ NOTE *** -->
			<div id="readNote">
				<div class="barTopSubview">
					<a href="#newNote" class="new-note button-sv"><i class="fa fa-plus"></i> Add new note</a>
				</div>
				<div class="noteWrap col-md-8 col-md-offset-2">
					<div class="panel panel-note">
						<div class="e-slider owl-carousel owl-theme">
							<div class="item">
								<div class="panel-heading">
									<h3>This is a Note</h3>
								</div>
								<div class="panel-body">
									<div class="note-short-content">
										Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam...
									</div>
									<div class="note-content">
										Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.
										Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat.
										Quis aute iure reprehenderit in <strong>voluptate velit</strong> esse cillum dolore eu fugiat nulla pariatur.
										<br>
										Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
										<br>
										Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit, amet, consectetur, adipisci v'elit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem.
										<br>
										Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut <strong>aliquid ex ea commodi consequatur?</strong>
										<br>
										Quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur?
										<br>
										At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non provident, similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
										<br>
										Nam libero tempore, cum soluta nobis est eligendi optio, cumque nihil impedit, quo minus id, quod maxime placeat, facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet, ut et voluptates repudiandae sint et molestiae non recusandae.
										<br>
										Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
									</div>
									<div class="note-options pull-right">
										<a href="#readNote" class="read-note"><i class="fa fa-chevron-circle-right"></i> Read</a><a href="#" class="delete-note"><i class="fa fa-times"></i> Delete</a>
									</div>
								</div>
								<div class="panel-footer">
									<div class="avatar-note"><img src="assets/images/avatar-2-small.jpg" alt="">
									</div>
									<span class="author-note">Nicole Bell</span>
									<time class="timestamp" title="2014-02-18T00:00:00-05:00">
										2014-02-18T00:00:00-05:00
									</time>
								</div>
							</div>
							<div class="item">
								<div class="panel-heading">
									<h3>This is the second Note</h3>
								</div>
								<div class="panel-body">
									<div class="note-short-content">
										Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Nemo enim ipsam voluptatem, quia voluptas sit...
									</div>
									<div class="note-content">
										Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
										<br>
										Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit, amet, consectetur, adipisci v'elit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem.
										<br>
										Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut <strong>aliquid ex ea commodi consequatur?</strong>
										<br>
										Quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur?
										<br>
										Nam libero tempore, cum soluta nobis est eligendi optio, cumque nihil impedit, quo minus id, quod maxime placeat, facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet, ut et voluptates repudiandae sint et molestiae non recusandae.
										<br>
										Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
									</div>
									<div class="note-options pull-right">
										<a href="#" class="read-note"><i class="fa fa-chevron-circle-right"></i> Read</a><a href="#" class="delete-note"><i class="fa fa-times"></i> Delete</a>
									</div>
								</div>
								<div class="panel-footer">
									<div class="avatar-note"><img src="assets/images/avatar-3-small.jpg" alt="">
									</div>
									<span class="author-note">Steven Thompson</span>
									<time class="timestamp" title="2014-02-18T00:00:00-05:00">
										2014-02-18T00:00:00-05:00
									</time>
								</div>
							</div>
							<div class="item">
								<div class="panel-heading">
									<h3>This is yet another Note</h3>
								</div>
								<div class="panel-body">
									<div class="note-short-content">
										At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores...
									</div>
									<div class="note-content">
										At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non provident, similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
										<br>
										Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
										<br>
										Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit, amet, consectetur, adipisci v'elit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem.
										<br>
										Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut <strong>aliquid ex ea commodi consequatur?</strong>
									</div>
									<div class="note-options pull-right">
										<a href="#" class="read-note"><i class="fa fa-chevron-circle-right"></i> Read</a><a href="#" class="delete-note"><i class="fa fa-times"></i> Delete</a>
									</div>
								</div>
								<div class="panel-footer">
									<div class="avatar-note"><img src="assets/images/avatar-4-small.jpg" alt="">
									</div>
									<span class="author-note">Ella Patterson</span>
									<time class="timestamp" title="2014-02-18T00:00:00-05:00">
										2014-02-18T00:00:00-05:00
									</time>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- *** SHOW CALENDAR *** -->
			<div id="showCalendar" class="col-md-10 col-md-offset-1">
				<div class="barTopSubview">
					<a href="#newEvent" class="new-event button-sv" data-subviews-options='{"onShow": "editEvent()"}'><i class="fa fa-plus"></i> Add new event</a>
				</div>
				<div id="calendar"></div>
			</div>
			<!-- *** NEW EVENT *** -->
			<div id="newEvent">
				<div class="noteWrap col-md-8 col-md-offset-2">
					<h3>Add new event</h3>
					<form class="form-event">
						<div class="row">
							<div class="col-md-12">
								<div class="form-group">
									<input class="event-id hide" type="text">
									<input class="event-name form-control" name="eventName" type="text" placeholder="Event Name...">
								</div>
							</div>
							<div class="col-md-4">
								<div class="form-group">
									<input type="checkbox" class="all-day" data-label-text="All-Day" data-on-text="True" data-off-text="False">
								</div>
							</div>
							<div class="no-all-day-range">
								<div class="col-md-8">
									<div class="form-group">
										<div class="form-group">
											<span class="input-icon">
												<input type="text" class="event-range-date form-control" name="eventRangeDate" placeholder="Range date"/>
												<i class="fa fa-clock-o"></i> </span>
										</div>
									</div>
								</div>
							</div>
							<div class="all-day-range">
								<div class="col-md-8">
									<div class="form-group">
										<div class="form-group">
											<span class="input-icon">
												<input type="text" class="event-range-date form-control" name="ad_eventRangeDate" placeholder="Range date"/>
												<i class="fa fa-calendar"></i> </span>
										</div>
									</div>
								</div>
							</div>
							<div class="hide">
								<input type="text" class="event-start-date" name="eventStartDate"/>
								<input type="text" class="event-end-date" name="eventEndDate"/>
							</div>
							<div class="col-md-12">
								<div class="form-group">
									<select class="form-control selectpicker event-categories">
										<option data-content="<span class='event-category event-cancelled'>Cancelled</span>" value="event-cancelled">Cancelled</option>
										<option data-content="<span class='event-category event-home'>Home</span>" value="event-home">Home</option>
										<option data-content="<span class='event-category event-overtime'>Overtime</span>" value="event-overtime">Overtime</option>
										<option data-content="<span class='event-category event-generic'>Generic</span>" value="event-generic" selected="selected">Generic</option>
										<option data-content="<span class='event-category event-job'>Job</span>" value="event-job">Job</option>
										<option data-content="<span class='event-category event-offsite'>Off-site work</span>" value="event-offsite">Off-site work</option>
										<option data-content="<span class='event-category event-todo'>To Do</span>" value="event-todo">To Do</option>
									</select>
								</div>
							</div>
							<div class="col-md-12">
								<div class="form-group">
									<textarea class="summernote" placeholder="Write note here..."></textarea>
								</div>
							</div>
						</div>
						<div class="pull-right">
							<div class="btn-group">
								<a href="#" class="btn btn-info close-subview-button">
									Close
								</a>
							</div>
							<div class="btn-group">
								<button class="btn btn-info save-new-event" type="submit">
									Save
								</button>
							</div>
						</div>
					</form>
				</div>
			</div>
			<!-- *** READ EVENT *** -->
			<div id="readEvent">
				<div class="noteWrap col-md-8 col-md-offset-2">
					<div class="row">
						<div class="col-md-12">
							<h2 class="event-title">Event Title</h2>
							<div class="btn-group options-toggle pull-right">
								<button class="btn dropdown-toggle btn-transparent-grey" data-toggle="dropdown">
									<i class="fa fa-cog"></i>
									<span class="caret"></span>
								</button>
								<ul role="menu" class="dropdown-menu dropdown-light pull-right">
									<li>
										<a href="#newEvent" class="edit-event">
											<i class="fa fa-pencil"></i> Edit
										</a>
									</li>
									<li>
										<a href="#" class="delete-event">
											<i class="fa fa-times"></i> Delete
										</a>
									</li>
								</ul>
							</div>
						</div>
						<div class="col-md-6">
							<span class="event-category event-cancelled">Cancelled</span>
							<span class="event-allday"><i class='fa fa-check'></i> All-Day</span>
						</div>
						<div class="col-md-12">
							<div class="event-start">
								<div class="event-day"></div>
								<div class="event-date"></div>
								<div class="event-time"></div>
							</div>
							<div class="event-end"></div>
						</div>
						<div class="col-md-12">
							<div class="event-content"></div>
						</div>
					</div>
				</div>
			</div>
			<!-- *** NEW CONTRIBUTOR *** -->
			<div id="newContributor">
				<div class="noteWrap col-md-8 col-md-offset-2">
					<h3>Add new contributor</h3>
					<form class="form-contributor">
						<div class="row">
							<div class="col-md-12">
								<div class="errorHandler alert alert-danger no-display">
									<i class="fa fa-times-sign"></i> You have some form errors. Please check below.
								</div>
								<div class="successHandler alert alert-success no-display">
									<i class="fa fa-ok"></i> Your form validation is successful!
								</div>
							</div>
							<div class="col-md-6">
								<div class="form-group">
									<input class="contributor-id hide" type="text">
									<label class="control-label">
										First Name <span class="symbol required"></span>
									</label>
									<input type="text" placeholder="Insert your First Name" class="form-control contributor-firstname" name="firstname">
								</div>
								<div class="form-group">
									<label class="control-label">
										Last Name <span class="symbol required"></span>
									</label>
									<input type="text" placeholder="Insert your Last Name" class="form-control contributor-lastname" name="lastname">
								</div>
								<div class="form-group">
									<label class="control-label">
										Email Address <span class="symbol required"></span>
									</label>
									<input type="email" placeholder="Text Field" class="form-control contributor-email" name="email">
								</div>
								<div class="form-group">
									<label class="control-label">
										Password <span class="symbol required"></span>
									</label>
									<input type="password" class="form-control contributor-password" name="password">
								</div>
								<div class="form-group">
									<label class="control-label">
										Confirm Password <span class="symbol required"></span>
									</label>
									<input type="password" class="form-control contributor-password-again" name="password_again">
								</div>
							</div>
							<div class="col-md-6">
								<div class="form-group">
									<label class="control-label">
										Gender <span class="symbol required"></span>
									</label>
									<div>
										<label class="radio-inline">
											<input type="radio" class="grey contributor-gender" value="F" name="gender">
											Female
										</label>
										<label class="radio-inline">
											<input type="radio" class="grey contributor-gender" value="M" name="gender">
											Male
										</label>
									</div>
								</div>
								<div class="form-group">
									<label class="control-label">
										Permits <span class="symbol required"></span>
									</label>
									<select name="permits" class="form-control contributor-permits" >
										<option value="View and Edit">View and Edit</option>
										<option value="View Only">View Only</option>
									</select>
								</div>
								<div class="form-group">
									<div class="fileupload fileupload-new contributor-avatar" data-provides="fileupload">
										<div class="fileupload-new thumbnail"><img src="assets/images/anonymous.jpg" alt="" width="50" height="50"/>
										</div>
										<div class="fileupload-preview fileupload-exists thumbnail"></div>
										<div class="contributor-avatar-options">
											<span class="btn btn-light-grey btn-file"><span class="fileupload-new"><i class="fa fa-picture-o"></i> Select image</span><span class="fileupload-exists"><i class="fa fa-picture-o"></i> Change</span>
												<input type="file">
											</span>
											<a href="#" class="btn fileupload-exists btn-light-grey" data-dismiss="fileupload">
												<i class="fa fa-times"></i> Remove
											</a>
										</div>
									</div>
								</div>
								<div class="form-group">
									<label class="control-label">
										SEND MESSAGE (Optional)
									</label>
									<textarea class="form-control contributor-message"></textarea>
								</div>
							</div>
						</div>
						<div class="pull-right">
							<div class="btn-group">
								<a href="#" class="btn btn-info close-subview-button">
									Close
								</a>
							</div>
							<div class="btn-group">
								<button class="btn btn-info save-contributor" type="submit">
									Save
								</button>
							</div>
						</div>
					</form>
				</div>
			</div>
			<!-- *** SHOW CONTRIBUTORS *** -->
			<div id="showContributors">
				<div class="barTopSubview">
					<a href="#newContributor" class="new-contributor button-sv"><i class="fa fa-plus"></i> Add new contributor</a>
				</div>
				<div class="noteWrap col-md-10 col-md-offset-1">
					<div class="panel panel-default">
						<div class="panel-body">
							<div id="contributors">
								<div class="options-contributors hide">
									<div class="btn-group">
										<button class="btn dropdown-toggle btn-transparent-grey" data-toggle="dropdown">
											<i class="fa fa-cog"></i>
											<span class="caret"></span>
										</button>
										<ul role="menu" class="dropdown-menu dropdown-light pull-right">
											<li>
												<a href="#newContributor" class="show-subviews edit-contributor">
													<i class="fa fa-pencil"></i> Edit
												</a>
											</li>
											<li>
												<a href="#" class="delete-contributor">
													<i class="fa fa-times"></i> Delete
												</a>
											</li>
										</ul>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- end: SUBVIEW SAMPLE CONTENTS -->
		</div>
		<!-- start: MAIN JAVASCRIPTS -->
		<!--[if lt IE 9]>
		<script src="assets/plugins/respond.min.js"></script>
		<script src="assets/plugins/excanvas.min.js"></script>
		<script type="text/javascript" src="assets/plugins/jQuery/jquery-1.11.1.min.js"></script>
		<![endif]-->
		<!--[if gte IE 9]><!-->
		<script src="assets/plugins/jQuery/jquery-2.1.1.min.js"></script>
		<!--<![endif]-->
		<script src="assets/plugins/jquery-ui/jquery-ui-1.10.2.custom.min.js"></script>
		<script src="assets/plugins/bootstrap/js/bootstrap.min.js"></script>
		<script src="assets/plugins/blockUI/jquery.blockUI.js"></script>
		<script src="assets/plugins/iCheck/jquery.icheck.min.js"></script>
		<script src="assets/plugins/moment/min/moment.min.js"></script>
		<script src="assets/plugins/perfect-scrollbar/src/jquery.mousewheel.js"></script>
		<script src="assets/plugins/perfect-scrollbar/src/perfect-scrollbar.js"></script>
		<script src="assets/plugins/bootbox/bootbox.min.js"></script>
		<script src="assets/plugins/jquery.scrollTo/jquery.scrollTo.min.js"></script>
		<script src="assets/plugins/ScrollToFixed/jquery-scrolltofixed-min.js"></script>
		<script src="assets/plugins/jquery.appear/jquery.appear.js"></script>
		<script src="assets/plugins/jquery-cookie/jquery.cookie.js"></script>
		<script src="assets/plugins/velocity/jquery.velocity.min.js"></script>
		<script src="assets/plugins/TouchSwipe/jquery.touchSwipe.min.js"></script>
		<!-- end: MAIN JAVASCRIPTS -->
		<!-- start: JAVASCRIPTS REQUIRED FOR SUBVIEW CONTENTS -->
		<script src="assets/plugins/owl-carousel/owl-carousel/owl.carousel.js"></script>
		<script src="assets/plugins/jquery-mockjax/jquery.mockjax.js"></script>
		<script src="assets/plugins/toastr/toastr.js"></script>
		<script src="assets/plugins/bootstrap-modal/js/bootstrap-modal.js"></script>
		<script src="assets/plugins/bootstrap-modal/js/bootstrap-modalmanager.js"></script>
		<script src="assets/plugins/fullcalendar/fullcalendar/fullcalendar.min.js"></script>
		<script src="assets/plugins/bootstrap-switch/dist/js/bootstrap-switch.min.js"></script>
		<script src="assets/plugins/bootstrap-select/bootstrap-select.min.js"></script>
		<script src="assets/plugins/jquery-validation/dist/jquery.validate.min.js"></script>
		<script src="assets/plugins/bootstrap-fileupload/bootstrap-fileupload.min.js"></script>
		<script src="assets/plugins/DataTables/media/js/jquery.dataTables.min.js"></script>
		<script src="assets/plugins/DataTables/media/js/DT_bootstrap.js"></script>
		<script src="assets/plugins/truncate/jquery.truncate.js"></script>
		<script src="assets/plugins/summernote/dist/summernote.min.js"></script>
		<script src="assets/plugins/bootstrap-daterangepicker/daterangepicker.js"></script>
		<script src="assets/js/subview.js"></script>
		<script src="assets/js/subview-examples.js"></script>
		<!-- end: JAVASCRIPTS REQUIRED FOR SUBVIEW CONTENTS -->
		<!-- start: JAVASCRIPTS REQUIRED FOR THIS PAGE ONLY -->
		<script src="assets/plugins/ladda-bootstrap/dist/spin.min.js"></script>
		<script src="assets/plugins/ladda-bootstrap/dist/ladda.min.js"></script>
		<script src="assets/js/ui-buttons.js"></script>
		<!-- end: JAVASCRIPTS REQUIRED FOR THIS PAGE ONLY -->
		<!-- start: CORE JAVASCRIPTS  -->
		<script src="assets/js/main.js"></script>
		<!-- end: CORE JAVASCRIPTS  -->
		<script>
			jQuery(document).ready(function() {
				Main.init();
				SVExamples.init();
				UIButtons.init();
			});
		</script>
	</body>
	<!-- end: BODY -->
</html>